Question

使用本教程：http://www.impressivewebs.com/callback-functions-javascript/

我做了一个简单的回调函数......但它是同步调用的。我哪里错了？这让我疯了！

预期行为：警报框和颜色更改将一直等到动画完成。

$('#div1').click(function(){
    animate('#div1', function(){
       changeDiv2('#div2');
       alert('done'); 
    });   

});

function animate(div, callback){
    $(div).animate({left: '200px'}, {duration: 5000, queue: true});
    $(div).animate({top: '200px'}, {duration: 5000, queue: false});
    callback();   
}

function changeDiv2(div){
    $(div).css('color','#FF0000');    

}

谢谢！

Answer 1

通过“同步”，我认为你的意思是“回调不等待动画完成”。至少，这就是最新Chromium版本的小提琴。

尝试此操作以强制回调等待动画完成后再触发：http://jsfiddle.net/EGCVy/

修改后的代码：

function animate(div, callback){
    $(div).animate({left: '200px'}, {duration: 5000, queue: true});
    $(div).animate({top: '200px'}, {duration: 5000, queue: false, complete: callback});
}

有关complete选项的更多信息（以及其他有用的详细信息，请参阅jQuery's animate documentation。）

注意：在计算'同步'时并不意味着popular dictionaries所说的。实质上，它意味着您按顺序执行操作。另一种选择是“异步”，可以同时发生多种事情。这是一个简化版本。有关更深入的答案，请参阅here。

Answer 2

学家大卫史密斯的答案是正确的，但我想指出，在jQuery中你可以通过使用单个$.animate调用而不是两个来简单地调用它。您可以在第一个参数中提供多个属性。

function animate(div, callback) {
  $(div).animate(
    { left: '200px', top: '200px' },
    { duration: 5000, complete: callback }
  );
}

Jquery自定义回调不起作用，找不到root问题

2 个答案: