jQuery的：当使用.scroll事件和警报Firefox似乎无限循环

问题描述

  $（document）.scroll（function（）函数在我的主模板中有以下jQuery代码： {
 var scroll_top = $（document）.scrollTop（）; 
 alert（scroll_top）; 
 if（scroll_top< = 70）{
 $（'＃fixedback'） .fadeOut（500）; 
} else {
 $（'＃fixedback'）。fadeIn（500）; 
} 
}）; 
  

当代码执行Firefox 11和12时，将会使页面空白并且变得无法响应。我必须在任务管理器中终止进程。如果我拿出警报（），代码执行完美。如果我在任何.scroll函数中添加了一个警报，我的任何页面上都会发生同样的情况。该页面将加载和工作，直到我滚动页面。

使用Jquery 1.7.1.min。和C＃ASPX页面。我还没有在其他浏览器上测试过，因为只有在开发时我需要警报才能工作。

解决方案

这个问题看起来像是Firefox中的一个bug。 ：有一个，可以在这里应用。它建议你使用 setTimeout（）推迟 alert（）调用，让Firefox有机会做任何事情它需要做，以避免消隐页面。将解决方法应用到你的代码，你会得到这样的东西：

pre $ window $。
var timeOutId = 0;
var jitterBuffer = 200;
函数catchScroll（）{
if（timeOutId）clearTimeout（timeOutId）;
timeOutId = setTimeout（function（）{DoStuffOnScrollEvent（）}，jitterBuffer）;


函数DoStuffOnScrollEvent（）{
var scroll_top = $（document）.scrollTop（）;
alert（scroll_top）; （scroll_top $（'＃fixedback'）。fadeOut（500）;
if（scroll_top<
} else {
$（'＃fixedback'）。fadeIn（500）;
}
};

或者，而不是 alert（），你可以使用 console.log（），它可以通过。

I have the following jQuery code in one of my master templates:

$(document).scroll(function() {
    var scroll_top = $(document).scrollTop();
    alert(scroll_top);
    if (scroll_top <= 70) {
        $('#fixedback').fadeOut(500);
    } else {
        $('#fixedback').fadeIn(500);
    }
});

When the code executes Firefox 11 and 12 will blank the page and become unresponsive. I have to terminate the process in Task Manager. If I take out the alert(), the code executes perfectly. If I add an alert in any of the .scroll functions the same thing happens on any of my pages. The page will load and works until I scroll the page.

Using Jquery 1.7.1.min. and C# ASPX pages. I haven't tested on other browsers as it is only for development that I need the alerts to work.

解决方案

It looks like a bug in Firefox.

The question: Firefox scrollTop problem has an answer that can be applied here. What it suggests is that you defer the alert() call using setTimeout() to give Firefox a chance to do whatever it needs to do to avoid blanking the page. Applying the workaround to your code, you would get something like this:

window.onscroll = catchScroll;
var timeOutId = 0;
var jitterBuffer = 200;
function catchScroll() {
    if (timeOutId) clearTimeout(timeOutId);
    timeOutId = setTimeout(function () { DoStuffOnScrollEvent() }, jitterBuffer);
}

function DoStuffOnScrollEvent() {
    var scroll_top = $(document).scrollTop();
    alert(scroll_top);
    if (scroll_top <= 70) {
        $('#fixedback').fadeOut(500);
    } else {
        $('#fixedback').fadeIn(500);
    }
};

Or, instead of alert(), you could use console.log(), which will work natively in later versions of IE and Chrome, and Firefox via Firebug.

这篇关于jQuery的：当使用.scroll事件和警报Firefox似乎无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！