在jquery回调后执行代码

Executing code after jquery call back

本文关键字:执行 代码 回调 jquery      更新时间:2023-09-26

假设我有以下js代码

$(function() {
   $('#some_id').load('myfile.html', function() {
      alert('Call back called');
   });
  alert('You should alert second');
  // more javascript code .........
});

出于某种原因,alert('Call back called');是最后一个提醒我的东西。我认为js代码是按照文件的顺序执行的。有没有办法让alert('Call back called');优先于我的所有其他函数。

看看我的简单代码片段,有人会建议为什么不把alert('You should alert second');放在函数回调中,不幸的是,我继承了一个非常大的代码库,在回调中干扰所有这些函数调用是不可行的

.load()是一个异步方法,您作为参数传递给它的匿名函数只有在异步方法完成执行时才会执行。

"我认为js代码是按照文件的顺序执行的。"确实如此,这就是这里发生的事情。但是,因为.load()回调函数是回调函数(即只有在异步操作完成后才会触发),所以alert('Call back called');只有在将来某个时候被调用时才会触发。

正如其他人所指出的,load是一种异步方法,因此需要使用类似于同步AJAX调用的方法。这样使用:
$.ajax({
     url:    'myfile.html',
     async:   false
     success: function(result) {
                  alert('Call back called');
              }
});
alert('You should alert second');

使用纯javascript,只需为第二个alert()区域中的内容添加一个带有回调参数的函数:

$(function() {
   function someCode (callback) {
     $('#some_id').load('myfile.html', function() {
       alert('Call back called');
       // add parameters, if you like
       callback();
     });
   }
   function someMoreCode() {
     alert('You should alert second');
     // more javascript code .........
   }
   // And Finally...
   someCode(someMoreCode);
});

您可以使用Deferred Object来处理异步调用。这样,无论何时返回响应,您的代码都将按读取顺序执行:

$(function() {
    var jqxhr = $.get('myfile.html', function(data) {
        $('#some_id').html(data);
        alert('Call back called');
    });
    jqxhr.done(function() { 
        alert('You will alert second');
    });
});

如果您希望alert('You should alert second');第二次发生,您需要从回调函数中调用它

$(function() {
   $('#some_id').load('myfile.html', function() {
      alert('Call back called');
      alert('You should alert second');
   });
});