javascript - Wait for function to finish before starting again - Stack Overflow

admin管理员组

文章数量:1336203

Good Morning,

I am trying to call the same function everytime the user presses a button. Here is what happens at the moment..

User clicks button -> Calls function -> function takes 1000ms+ to finish (due to animation with jQuery and AJAX calls)

What I want to happen is every time the user presses the button it adds the function to the queue, waits for the previous call to finish, and then starts..

Is this possible?

Sorry if my explanation is a bit confusing..

Thanks Matthew

Good Morning,

I am trying to call the same function everytime the user presses a button. Here is what happens at the moment..

User clicks button -> Calls function -> function takes 1000ms+ to finish (due to animation with jQuery and AJAX calls)

What I want to happen is every time the user presses the button it adds the function to the queue, waits for the previous call to finish, and then starts..

Is this possible?

Sorry if my explanation is a bit confusing..

Thanks Matthew

• javascript
• jquery
• ajax
• settimeout

Share Improve this question Follow edited Dec 22, 2010 at 22:40 jwheron 2,57222 gold badges3030 silver badges4040 bronze badges asked Dec 22, 2010 at 22:35 Matthew BrownMatthew Brown 1,05233 gold badges1111 silver badges2424 bronze badges 1

• 1 You want to queue the animations and the ajax correct? – Cole Commented Dec 22, 2010 at 22:39

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

Since Functions are objects they can store properties. You can have your function increment a 'queue' property on itself every time its called (button pressed) and then at the end of the function execution, check if the queue property of itself is > 0, and if so, decrement the queue property by one and call itself again using setTimeout.

You could add a callback function to the one that makes the animation, once the animation finishes the callback it's called so you can do what you want.

Here follows an example from the jquery docs:

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Put your code here, so it will be executed once the animation pletes
  });
});

P.S.: Morning? It's almost midnight ;D

You could keep track of a global queue/array where you add to the queue each time the user presses the button, then you'll want a callback in your function (such as in the success callback for jQuery) that does the work to check the queue and call the next function on the queue.

I recently had to do this in my own application. The best suggestion I have for you is (assuming you already have your AJAX calls inside of a JavaScript function) to pass a callback function parameter into your JavaScript function. Then, in the success section of your AJAX call, call your callback function.

Example:

// In HTML <script> tags.
$(document).ready(function () {
    $("button#queue").click(function() {
        GetMembers(GetGroups(), MemberCallback));
    });
});

function GetMembers(userId, callback) {
    $.ajax({
        //Initialized AJAX properties
        url: "/My/Project/Ajax/Page.extension",
        data: "{ 'groupId':'" + groupId + "'}",
        success: function (result) {
            callback(result.d);
        }
    });
}

function MemberCallback(members) {
    // Do your thing here.
}

Disable the button when they click it. Enable it when the ajax routine is plete.

本文标签： javascriptWait for function to finish before starting againStack Overflow