等待函数完成后再开始下一次操作

Question

早上好，

我正在尝试每次用户按下按钮时调用相同的函数。目前的情况是这样的。

用户点击按钮 -> 调用函数 -> 函数需要1000毫秒以上才能完成（由于使用jQuery和AJAX调用进行动画）

我希望的是，每次用户按下按钮时，它会将该函数添加到队列中，等待前一个调用完成，然后开始执行。

这可行吗？

如果我的解释有点混乱，请见谅。

谢谢Matthew

- Matthew Brown

---

你想要排队动画和Ajax请求，对吗？ - Cole

Answer 1

由于函数是对象，因此它们可以存储属性。您的函数可以在每次调用（按下按钮）时将“queue”属性增加1，并在函数执行结束时检查其自身的队列属性是否> 0。如果是，则将队列属性减少1并再次使用 setTimeout 调用自身。

- Kai

---

最好的方法是使用setTimeout调用。否则，这将成为堆栈溢出的原因。;-) - draeton

+1 @draeton 好观点！如果函数在结尾处调用自身，应该使用setTimeout，在延迟为零的情况下执行。 - Kai

@draeton：确实，这也有好处，即浏览器的渲染引擎可以执行某些操作（并避免了邪恶的“脚本Y似乎忙碌了一段时间。杀死它？”框）。 - Marcel Korpel

Answer 2

最近我在自己的应用程序中不得不这样做。我给你的最佳建议是（假设你已经在JavaScript函数内部进行了AJAX调用），将回调函数参数传递到JavaScript函数中。然后，在AJAX调用的success部分中，调用你的回调函数。

示例：

// 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.
}

- jwheron

Answer 3

你可以在制作动画的函数中添加回调函数，一旦动画完成，就会调用回调函数，这样你就可以做你想做的事情。

下面是来自jquery文档的一个例子：

$('#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 completes
  });
});

附言：早上？现在都快半夜了 ;D

- Alberto Zaccagni

---

已经快到半夜了。顺便说一下，我想他事先不知道（动画何时完成）按钮是否被再次按下。 - Marcel Korpel

Answer 4

你可以跟踪一个全局队列/数组，在用户按下按钮时将其添加到队列中，然后您需要在函数中设置回调（例如jQuery的success回调），以便检查队列并在队列上调用下一个函数。

- David

---

不需要污染全局命名空间：只需向与其配合的对象添加属性即可。 - Marcel Korpel

Answer 5

当用户点击按钮时，禁用它。当ajax程序完成后，启用它。

- James