检测Javascript何时完成执行

Detecting When Javascript is Done Executing

本文关键字：执行 何时完 Javascript 检测      更新时间：2023-09-26

javascript中是否有一个事件，我可以绑定某种侦听器，告诉我何时所有javascript/jQuery/Ajax都在页面上执行?在执行开始和我需要监听器"监听"的时间之间，页面将不会加载/卸载/重新加载等，所以这些事件不起作用。页面实际上没有做任何事情。单击按钮后，会触发一些javascript函数，其中包含对web服务的Ajax调用。在所有完成之后，我想更改window.location。但窗口。在我的例子中，在web服务完成之前位置就发生了变化。

目前使用setTimeout来实现这一点，但有时代码需要比正常运行更多的时间，有时窗口。Location在所有其他javascript完成之前就启动了。简单地说

<input type = "button"... onclick="doThis();";
function doThis() {
   try{
      //Contains AJAX calls to web services which is mainly what screws up my timing since it may still be trying to execute stuff when the redirect statement happens
      }
   catch (e) {
      }
  //Currently doing setTimeout(redirect, 10000);
  //Would like to simply detect when all of the above is done and then redirect.  
}
编辑:遗漏了一个重要的信息。AJAX调用在for循环中。变量和成功回调的使用对我来说并不是很好，因为当我的成功回调执行时，我的变量在for循环中有了新的值。

您试图实现的是一个经典的并发编程问题。这是通过使用屏障来解决的。

简单地说，你需要:

  1. 统计你已经打了多少个电话。
  2. 设置所有AJAX完成事件的回调。
  3. 使回调减少呼叫数。
  4. 回调检查呼叫数是否为零。如果是，则调用最终代码(这里是redirect)。

实际实现留给读者作为练习  :)

提示:将AJAX调用嵌入到处理所有计数器递增和回调设置的函数中。

我是怎么做的:

  • 创建一个变量，表示未完成的AJAX调用的数量。
  • 在进行AJAX调用之前，增加变量。
    • 在完成AJAX调用的代码末尾，调用一个函数(例如ajaxComplete)。
  • ajaxComplete应该减少计数。当它达到零时，你知道你所有的呼叫都完成了。

假设您正在使用jQuery.ajax，听起来您正在寻找ajaxStop.

为什么不尝试在回调中使用下划线库的after函数?

var done = _.after(3, function() {
    window.location = 'http://example.com';
});
$.ajax({
  url: '/tic',
  success: function() {
    done();
  }
});
$.ajax({
  url: '/tac',
  success: function() {
    done();
  }
});
$.ajax({
  url: '/toe',
  success: function( data ) {
    done();
  }
});

您应该检查来自AJAX调用的响应，并且只有在该响应中进行重定向。这样可以避免在AJAX仍在执行时重定向。

相关文章：