为什么我的 javascript 函数有时不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10062761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my javascript function sometimes not working
提问by BastiaanWW
I have a large javascript function init() that hides and shows a large number of div's. When the page is loaded the javascript function is triggered by the script below.
我有一个很大的 javascript 函数 init() 可以隐藏和显示大量的 div。当页面加载时，javascript 函数由下面的脚本触发。
<script type="text/javascript">
$(document).ready(function() {
init();
});
</script>
Most of the time the javascript is triggered by the script below. However once in a while the script init() seems not to be triggered. Approximately 1 of 20 times the function init() seems not to be triggered. All the other 19 times the page and javascript is working fine without any errors. The circumstances when this error occurs seem to be no different from normally as this error occurs when Pressing F5 20 times.
大多数情况下，javascript 是由下面的脚本触发的。然而，有时脚本 init() 似乎不会被触发。似乎没有触发 init() 函数的 20 次中的大约 1 次。所有其他 19 次页面和 javascript 工作正常，没有任何错误。出现此错误的情况似乎与正常情况没有什么不同，因为按 F5 20 次时会出现此错误。
I checked that init() seems to not being called at all because the first statement (alert("function called");) in init() wasn't called. In the cases that the javascript was working fine I got the alert message and the page was loaded fine without any errors.
我检查了 init() 似乎根本没有被调用，因为没有调用 init() 中的第一个语句 (alert("function called");)。在 javascript 工作正常的情况下，我收到警报消息，页面加载正常，没有任何错误。
I tried different ways to trigger the javascript such as window.onload and putting at the end of the page this script:
我尝试了不同的方法来触发 javascript，例如 window.onload 并将此脚本放在页面末尾：
<script type="text/javascript">init();</script>
All those different methods to trigger init() didn't seem to make any difference.
所有这些触发 init() 的不同方法似乎都没有任何区别。
This is the init() function:
这是 init() 函数：
function init(){
pauzereload__gl_var=1;
load2__gl_var=0;
//Hide bus options:
var boxbusnotshow = document.getElementById("boxDiv").getElementsByTagName("a");
boxbusnotshow[3].style.display="none";
boxbusnotshow[4].style.display="none";
boxbusnotshow[5].style.display="none";
document.getElementById("loadingdiv").style.display = "none";
document.getElementById("loadingdivdate").style.display = "none";
getvariables(); //Get variables generated by the php script, to get activetab
var a=1; b=1;
highlightboxinitiate(a,activetab__gl_var,load2__gl_var);
highlightlistinitiate(a,b);
pauzereload__gl_var=0;
}
This is the highlightboxinitiate function that is being called from the init() function:
这是从 init() 函数调用的 highlightboxinitiate 函数：
function highlightboxinitiate(divnr,linenr,load2__gl_var) {
getvariables();
for (i = 1; i < 8; i++) {document.getElementById("nextnr" + i).style.display = "none";}
if(counttab__gl_var[linenr]>(9 + settab__gl_var[linenr]) && load2__gl_var==0){
document.getElementById("nextnr" + linenr).style.display = "block";}
for (i = 1; i < 8; i++) {document.getElementById("prevnr" + i).style.display = "none";}
if(settab__gl_var[linenr] >2 && load2__gl_var==0){
document.getElementById("prevnr" + linenr).style.display = "block";}
for (i = 1; i < 8; i++) {document.getElementById("pagenr" + i).style.display = "none";}
if(load2__gl_var==0 && counttab__gl_var[linenr]>9){
document.getElementById("pagenr" + linenr).style.display = "block";}
if(load2__gl_var==1){
for (i = 1; i < 8; i++) {document.getElementById("renextnr" + i).style.display = "none";}
if(counttab__gl_var[linenr]>(9 + settab__gl_var[linenr])){
document.getElementById("renextnr" + linenr).style.display = "block";}
for (i = 1; i < 8; i++) {document.getElementById("reprevnr" + i).style.display = "none";}
if(settab__gl_var[linenr] > 2){
document.getElementById("reprevnr" + linenr).style.display = "block";}
for (i = 1; i < 8; i++) {document.getElementById("repagenr" + i).style.display = "none";}
if(counttab__gl_var[linenr]>9){
document.getElementById("repagenr" + linenr).style.display = "block";}
}
var box = document.getElementById("boxDiv").getElementsByTagName("a");
current_tab__gl_var=linenr;
for (i = 0; i < box.length; i++) {unselectboxinitiate(divnr,i);}
tabselnr = linenr-1;
if (tabselnr<=2){box[tabselnr].className="selected1";}
if (tabselnr>2 && tabselnr<=5){box[tabselnr].className="selected2";}
if (tabselnr==6){box[tabselnr].className="selected3";}
for (j = 1; j < 10; j++) {
for (i = 1; i < 8; i++) {
document.getElementById("list"+j+"n"+i).style.display = "none";
document.getElementById("it"+j+"n"+i).style.display = "none";}
document.getElementById("list"+j+"n"+linenr).style.display = "block";
document.getElementById("it"+1+"n"+linenr).style.display = "block";}
}
This is the highlightlistinitiate function that is being called from the init() function:
这是从 init() 函数调用的 highlightlistinitiate 函数：
function highlightlistinitiate(divnr,linenr) {
var box = document.getElementById("listmenu").getElementsByTagName("a");
current_list__gl_var=linenr;
for (i = 0; i < box.length; i++) {
box[i].className="unselected";}
box[linenr-1].className="selected";
for (j = 1; j < 10; j++) {
for (i = 1; i < 8; i++) {
document.getElementById("it"+j+"n"+i).style.display = "none";}}
document.getElementById("it"+current_list__gl_var+"n"+current_tab__gl_var).style.display = "block";
}
This is the getvariables function that is being called from the highlightboxinitiate function:
这是从 highlightboxinitiate 函数调用的 getvariables 函数：
function getvariables(){
counttab__gl_var = new Array (7);
settab__gl_var = new Array (7);
counttab__gl_var [1] = 83; settab__gl_var [1] = 0; activetab__gl_var = 2; counttab__gl_var [2] = 111; settab__gl_var [2] = 0; activetab__gl_var = 2; counttab__gl_var [3] = 137; settab__gl_var [3] = 0; activetab__gl_var = 2; counttab__gl_var [4] = 1; settab__gl_var [4] = 0; activetab__gl_var = 2; counttab__gl_var [5] = 1; settab__gl_var [5] = 0; activetab__gl_var = 2; counttab__gl_var [6] = 1; settab__gl_var [6] = 0; activetab__gl_var = 2; counttab__gl_var [7] = 1; settab__gl_var [7] = 0; activetab__gl_var = 2; }
I have the impression that the functions are ok because when the page was not properly initiated the first statement in the init() function was not executed.
我的印象是函数没问题，因为当页面没有正确启动时，init() 函数中的第一条语句没有执行。
I checked that crossbrowser is not influencing this problem. This problem occurs in all browsers.
我检查过跨浏览器不会影响这个问题。所有浏览器都会出现这个问题。
When the error occurs I don't see any error messages in the firebug console.
发生错误时，我在萤火虫控制台中看不到任何错误消息。
I've been searching and debugging a lot so any help will be very welcome and appreciated!
我一直在搜索和调试很多，所以任何帮助将非常受欢迎和赞赏！
回答by BastiaanWW
The problem was that somehow not all the content was loaded into the page, so the javascript crashed because it couldn't find all the objects.
问题是不知何故并非所有内容都加载到页面中，因此 javascript 崩溃，因为它无法找到所有对象。
The following statement at the end of the page helped resolve this issue:
页面末尾的以下语句有助于解决此问题：
<?php
print str_pad('',4096)."\n";
ob_flush();
flush();
set_time_limit(45);
?>
The above sends everything parsed until that statement to the browser.
以上将所有解析的内容发送到浏览器，直到该语句。
回答by Michael
You can try
你可以试试
<script type="text/javascript">
$(window).load(function() {
init();
});
</script>
instead of
代替
<script type="text/javascript">
$(document).ready(function() {
init();
});
</script>
回答by zeebonk
You should use $(document).ready instead of $(window).load.
您应该使用 $(document).ready 而不是 $(window).load。
This is because $(window).load only triggers when the entire page has fully loaded, including (external) images/javascript/css/frames etc. $(document).ready triggers when the DOM has fully been loaded. This means that you can already do DOM manipulation without having to wait on images being loaded etc.
这是因为 $(window).load 仅在整个页面完全加载时触发，包括（外部）图像/javascript/css/frames 等。 $(document).ready 在 DOM 完全加载时触发。这意味着您已经可以进行 DOM 操作，而无需等待加载图像等。
