一些jquery代碼導致我的網站凍結

Question

我的代碼是假設使3個不同的div一次一個淡入淡出，但由於某種原因，它凍結我的網站，我不知道問題是什麼或從哪裏開始修理它。

function randomString(length) { 
     var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split(''); 
     var str = ''; 
     for (var i = 0; i < length; i++) { 
     str += chars[Math.floor(Math.random() * chars.length)]; 
     } 
     return str; 
    } 
    var rnd = randomString(8); 

    jQuery(function($) { 
     $(".rnd").replaceWith(rnd); 


     $(".example").hide().each(function(i,e){ 
     $(e).before($('<a class="show-code" href="#">Show code &raquo;</a>'). 
         click(function(ev) { 
         $(e).slideToggle(); 
         $(this).hide(); 
         ev.preventDefault(); 
         })); 
     }); 
    }); 
     jQuery(function(jQuery){ 
     jQuery("#userandquery").tweet({ 
     count: 1, 
     query: "from:groovetheglobe http", 
     loading_text: "searching twitter..." 
     }); 
     jQuery("#userandquery2").tweet({ 
     count: 2, 
     query: "from:groovetheglobe http", 
     loading_text: "searching twitter..." 
     }); 
     jQuery("#userandquery3").tweet({ 
     count: 3, 
     query: "from:groovetheglobe http", 
     loading_text: "searching twitter..." 
     }); 
    }); 

function pulse_hide1(){ 
    jQuery("#userandquery").fadeOut(300); 
    jQuery("#userandquery-bottom").fadeOut(300); 
} 

function pulse_hide2(){ 
    jQuery("#userandquery2").fadeOut(300); 
    jQuery("#userandquery2-bottom").fadeOut(300); 
} 

function pulse_hide3(){ 
    jQuery("#userandquery3").fadeOut(300); 
    jQuery("#userandquery3-bottom").fadeOut(300); 
} 

function pulse_show1(){ 
    jQuery("#userandquery").fadeIn(300); 
    jQuery("#userandquery-bottom").fadeIn(300); 
} 

function pulse_show2(){ 
    jQuery("#userandquery2").fadeIn(300); 
    jQuery("#userandquery2-bottom").fadeIn(300); 
} 

function pulse_show3(){ 
    jQuery("#userandquery3").fadeIn(300); 
    jQuery("#userandquery3-bottom").fadeIn(300); 
} 

function call_pulse_hide(){ 
    setTimeout("pulse_hide1()",1000); 
    setTimeout("pulse_hide2()",3000); 
    setTimeout("pulse_hide3()",3000); 
} 

function call_pulse_show(){ 
    pulse_show1(); 
    setTimeout("pulse_show2()",3000); 
    setTimeout("pulse_show3()",3000); 
} 

function pulse_function(){ 
    while(true){ 
     call_pulse_hide(); 
     call_pulse_show(); 
    } 
} 

jQuery(document).ready(function(){ 
/*jQuery('#fadeout').fadeOut(300); 
jQuery('#fadein').delay(400).fadeIn(300);*/ 
pulse_function(); 
//alert("document done"); 
}); 

Answer 1

這是給你的問題。即使內部的兩個函數調用尚未完成，它也會始終執行。所以，發生的事情是，這兩個函數被稱爲超過了你真正想要的特定時間。想象一下！

function pulse_function(){ 
    while(true){ // <----- infinite loop.... O_O 
     call_pulse_hide(); 
     call_pulse_show(); 
    } 
} 

Answer 2

可能有一些其他的問題，但它會因爲這個功能被凍結：

function pulse_function(){ 
    while(true){ 
     call_pulse_hide(); 
     call_pulse_show(); 
    } 
} 

你有一個無限循環不隨時間做離開瀏覽器其他任何東西（儘管現代瀏覽器傾向於殺死這樣的JS並給用戶一個關於長時間運行的腳本的警告）。

取而代之的while(true)你應該使用setInterval讓您的代碼不養豬所有的處理時間：

function pulse_function() { 
    call_pulse_hide(); 
    call_pulse_show(); 
} 
setInterval(pulse_function, 3000); 

，將調用你的函數每3000ms。您可能想要從call_pulse_hide和call_pulse_show中取出setTimeout，並控制從setInterval開始的時間。

另一種選擇是完全擺脫pulse_function，並在您的document.ready處理程序中直接調用call_pulse_hide()。然後更新call_pulse_hide和call_pulse_show讓他們通過setTimeout一種標記隊的多次致電對方：

function call_pulse_hide(){ 
    setTimeout("pulse_hide1()",1000); 
    setTimeout("pulse_hide2()",3000); 
    setTimeout("pulse_hide3()",3000); 

    setTimeout(call_pulse_show, 3000); // <--- new bit 
} 

function call_pulse_show(){ 
    pulse_show1(); 
    setTimeout("pulse_show2()",3000); 
    setTimeout("pulse_show3()",3000); 

    setTimeout(call_pulse_hide, 3000); // <--- new bit 
} 

jQuery(document).ready(function(){ 
    call_pulse_hide(); 
} 

對於後一選項再次，你可能希望從call_pulse_hide和call_pulse_show內刪除現有setTimeout s，而只是通過我添加的新setTimeout控制時間，讓他們互相打電話延遲。 （注意：我添加的代碼使用更合乎需要的語法來代替setTimeout，而不是傳遞一串JS代碼，而不是傳遞給函數引用 - 請注意，對於函數引用語法，不包括括號你應該考慮這樣做，只要你使用setTimeout或setInterval。）