Question

我的代码假设让3个不同的div一次淡入或淡出一个但由于某种原因它会一直冻结我的网站，我不确定问题是什么或从哪里开始修复它。

    function randomString(length) {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.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){
      call_pulse_hide();
      call_pulse_show();
   }
}

你有一个无限循环，不会让浏览器有时间做任何事情（尽管现代浏览器倾向于杀死这样的JS并向用户发出关于长时间运行的脚本的警告）。

而不是while(true)，您应该使用setInterval，这样您的代码就不会占用所有处理时间：

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

这将每3000毫秒调用一次你的功能。您可能希望从setTimeout和call_pulse_hide中取出call_pulse_show，然后从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();
}

对于后一个选项，您可能希望从setTimeout和call_pulse_hide中移除现有的call_pulse_show，并通过新的setTimeout来控制时间他们补充道，让他们拖延时互相打电话。

（注意：我添加的代码对setTimeout使用了更理想的语法，而不是传递一个函数引用传递的JS代码字符串 - 请注意，对于函数引用语法，你不要在函数名后面加上括号。每当你使用setTimeout或setInterval时都应该考虑这样做。）

Answer 2

这给你提供了问题。 while(true)将始终执行，即使其中的两个函数调用尚未完成。所以，正在发生的事情是这两个函数被调用的次数超过了你在给定时间真正想要的函数。想象一下！

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

一些jquery代码导致我的网站冻结

2 个答案: