ajax回调中的JQuery切换最终生效

Question

我有一个带有地址的<select>和一个<button>，当按下它时，将在jQuery中触发此on('click')事件。在里面我想toggle()一个图像，然后在ajax完成后隐藏它，例如加载器。但是，在完成单击回调函数中的所有功能之前，toggle()应该执行的更改不会生效。

$('#add_existing_address').on('click', function() {
    log($('#loading-image').toggle({queue:false, duration: 10, complete: function() {log('yes');}}));
    sleep(3000);
    var value = $('#EXISING_ADDRESS').val();
    if (value != '') {
        addAddressToOrder(6, value);
        $('#EXISING_ADDRESS').val('');
    }
    //log($('#loading-image').toggle());
    document.getElementById('loading-image').style.display = 'none';
    log(document.getElementById('loading-image').style.display);
});

我已经确定我已经设置了{queue:false}并且持续时间是10毫秒。sleep()函数是一个自定义函数，它会减慢3秒，这样我就可以看到页面中的变化。我也尝试过使用普通的JS来更改图像的显示，但它也会在ajax完成后生效。

奇怪的是，第一次出现的toggle()将立即返回，log()将在控制台中显示结果，但更改将在on()回调的最后一行之后执行。到目前为止，我还没有发现为什么会发生这样的事情。

基本上，函数的输出将是：

​

Answer 1

Javascript基本上是浏览器中的单线程语言。这意味着，在任何给定的时间都只有一个执行点。

对于动画，这意味着必须使用setTimeout()或setInterval()在重新生成的动画帧中执行动画。参数queue只确定不同的动画是否可以并行运行(实际上，不同动画的所有动画帧都将连续运行)，或者它们是否一个接一个地运行。

为了解释代码中发生的事情:首先，切换方法是call，它启动一个动画。它设置了一些方法来在随后(异步地)调用动画帧中执行实际的动画，然后立即返回。接下来，进入睡眠状态(显然是某种循环)，它会暂停当前的执行线程，直到周期结束。由于js是单线程的，在这段时间内没有其他的执行可以参与，所以没有动画，什么也没有。在休眠之后，该函数一直执行到最后，执行样式更改。只有在这部分完成之后，单个javascript线程才再次可用于其他计算，即第一个创建的动画帧。