2012-01-09 73 views
12

我知道这可能听起来很奇怪,但我需要知道页面中是否有任何活动/正在运行的JavaScript。检测是否有任何JavaScript函数正在运行

我处于这种情况,在页面上的所有内容都被渲染并且所有其他脚本完成后,我必须运行我的javascript/jquery代码。

是否有可能检测到这一点?

编辑:

谢谢大家的答案。不幸的是,我无法找到解决方案,因为我无法完全控制页面上发生的事情。

甚至,我能够把我的JavaScript放在页面的末尾,我认为它不会再解决。原因是当页面呈现一个函数被触发时,它会调用其他函数并且他们调用其他函数等等。因此,一些数据不正确,这就是为什么我需要运行我的代码来纠正它。

我使用的setTimeout 2秒,以确保我的代码将被最后执行,但是这是丑陋的...

所以,谢谢大家,但是这是更问题的系统,而不是JS。

+0

什么浏览器运行? – Boomer 2012-01-09 14:43:07

+0

@Boomer我需要做这个跨浏览器。 – gotqn 2012-01-09 14:44:38

+0

这可能有所帮助:http://stackoverflow.com/questions/3283576/how-to-trace-javascript-events-stack-trace – 2012-01-09 14:45:46

回答

12

上的Web浏览器的JavaScript是单线程(禁止使用的web workers),所以如果你的JavaScript代码运行,根据定义没有其他的JavaScript代码运行。*

为了尽量保证你的脚本发生之后页面上的所有其他JavaScript已经被下载和评估,已发生的所有渲染之后,提出了一些建议:

  • 将脚本标记为您的代码在文件的最后。
  • 在标签上使用defer and async属性(它们会被不支持它们的浏览器忽略,但目标是尽可能地使您的最后)。
  • 通过DOM2风格的连接钩住windowload事件(例如,在具有标准支持的浏览器上为addEventListener,在较旧的IE版本上为attachEvent)。
  • load事件中,安排您的代码在setTimeout延迟0ms后运行(它不会真的为零,它会稍微长一些)。

所以,script标签:

<script async defer src="yourfile.js"></script> 

...和yourfile.js

(function() { 
    if (window.addEventListener) { 
     window.addEventListener("load", loadHandler, false); 
    } 
    else if (window.attachEvent) { 
     window.attachEvent("onload", loadHandler); 
    } 
    else { 
     window.onload = loadHandler; // Or you may want to leave this off and just not support REALLY old browsers 
    } 

    function loadHandler() { 
     setTimeout(doMyStuff, 0); 
    } 

    function doMyStuff() { 
     // Your stuff here. All images in the original markup are guaranteed 
     // to have been loaded (or failed) by the `load` event, and you know 
     // that other handlers for the `load` event have now been fired since 
     // we yielded back from our `load` handler 
    } 
})(); 

这并不意味着其他代码不会已经安排自己以后运行(通过setTimeout,例如,就像我们上面做的,但有一个更长的超时),但。

所以你可以做一些事情来做最后的尝试,但我不相信有任何方法可以在没有完全控制页面和脚本运行的情况下实际保证它(我从问题是你没有)。


(*有一些边缘的情况下螺纹可以悬浮在一个地方,然后允许其他代码到在另一个地方运行[例如,当一个AJAX调用完成而被示出的alert消息有些浏览器会触发ajax处理程序,即使0123'上的另一个函数正在等待解除],但它们是边缘情况,并且仍然只有一件事情正在一次完成。)

2

没有确切的方法这样做是因为您无法真正了解其他脚本已计划自己运行的最新版本。你将不得不决定你想要的目标。

  1. 您可以尝试在加载DOM时可能正在运行的任何其他操作之后运行脚本。
  2. 您可以尝试在页面完全加载(包括图像)时可能正在运行的任何其他内容之后运行脚本。

没有可靠的,跨浏览器的方式来知道这些事件,页面中的脚本正在使用。

无论是哪种情况,您都会勾选相应的事件,然后使用setTimeout()尝试在观察这些事件的任何其他事件之后运行脚本。例如,如果您决定等到整个页面(包括图像)被加载,并且想要让您的脚本在等待相同事件的其他任何事情之后运行,那么您应该这样做:

window.addEventListener("load", function() { 
    setTimeout(function() { 
     // put your code here 
    }, 1); 
}, false); 

对于早期版本的IE,您将不得不使用attachEvent()

使用此方法时,您不必担心脚本在页面中相对于页面中的其他脚本加载的位置,因为这会安排脚本在特定事件发生后的特定时间运行。

1

对于迟到的回复感到抱歉。

我已经找到了解决办法:

var loading_var = 0; 

    function f1() { 
     loading_var++; 
     /*code to be executed*/ 
     onready(); 
    } 

    function f2() { 
     loading_var++; 
     /*The same for each function in your code*/ 
     onready(); 
    } 

    function onready() { 
     loading_var--; 
     if(loading_var == 0) { 
     /*Means all functions have finished executing !*/ 
     } 
    } 

我用这个在JavaScript游戏,以防止用户因为功能仍在执行与游戏互动。

相关问题