Question

我收到了以下代码：

$('#some_object_id').hide();
$('div#some_version_div').hide();
$('#some_another_object_id').show();
someFunction();

我想在这3个中的最后一个完成其动作之后发出我的someFunction()。问题是，他们不时以不同的顺序完成（即现在最后一个可能是第二个，另一个是第一个等等）现在someFunction()发射而不等待这3个完成。任何想法如何解决它？谢谢。

Answer 1

jQuery的hide()和show()函数接受一个函数作为它们的参数，在它们完成时调用。（又称回调）。

$('selector').hide(function onFinish() {
  console.log('done')
})

要将它们中的三个组合在一起，我将它们转换为Promise，就像这样：

function promisify(func,selector){
  return new Promise(function (resolve) {
    $(selector)[func](resolve)
  })
}

Promise.all([
  promisify('hide', '#test'),
  promisify('hide', '#test1'),
  promisify('show', '#test2')
]).then(function onFinish() {
  console.log('done!')
})

Answer 2

您可以传递一个回调函数来隐藏，并显示在动画完成时执行。因此，如果您希望它们按顺序执行，只需在前一个回调中调用每个。

$('#some_object_id,div#some_version_div').hide(()=>{
  $('#some_another_object_id').show(()=>{
    someFunction();
  });  
});

如果你想阻止一堆内部回调，并且不要求每个动画运行依赖于其他动画，你可以使用一个标志。增加每个回调中的标志，检查它是否处于某个值，然后执行你的函数。

var flag = 0;
function incrementFlag(){
   flag++;
   if(flag>=2){
     flag=0;
     someFunction();
   }
}
$('#some_object_id,div#some_version_div').hide(incrementFlag);
$('#some_another_object_id').show(incrementFlag);

你也可以修改上面的内容以使用Promise，但是会留给你试试。

Answer 3

您应该使用最初设置为0的变量，并在每次完整调用时增加。一旦变量达到值3并且可以调用您的函数：

var completed = 0;
elem.hide(400, function(){
    completed++;
    if(completed > 2) someFunction();
});
//same for other elements...

几个jQuery调用后的javascript回调函数

3 个答案: