Question

旧标题：javascript中的窗口调整大小事件的setTimeout节流在ie7中连续触发

我有以下脚本：

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

function throttleTest() {

    var throttleTimer,
        testCount = 1;

    jQuery(window).on({
        "resize": function(){
            clearTimeout(throttleTimer);
            throttleTimer = setTimeout(function() {
                jQuery("ul.testList").prepend("<li>Prepended list item number: " + testCount + "</li>");
                testCount++;
            }, 500);        
        }
    });

};

以下 HTML ：

<ul class="testList">
</ul>

使用setTimeout限制技术，一旦用户停止调整浏览器的持续时间500ms，它应该只将一个列表项添加到testList ul。基本上它只在浏览器的每次调整大小时运行一次setTimeout代码，因为它在设置之前是clearTimeout。这种技术只允许在需要时触发代码，而不是在每次调整大小事件时触发，每当用户调整浏览器大小时，这可能是几十次。

这适用于除ie7之外的所有浏览器。奇怪的是，在ie7中，代码继续运行并停止将列表项预先添加到ul。

我在此处设置了演示：http://jsfiddle.net/cQRjp/

看看ie7，你会看到问题。 有人知道为什么这种情况在ie7中失败了吗？

编辑编号：1：

我已经删除了代码，以便在窗口调整大小时，li元素会被预先添加到页面上的ul元素，然后计数器会递增。就是这样。

这表明问题在于ie7如何解释调整大小事件，与节流定时器无关。看起来在页面上添加li项会触发ie7中的resize事件，因此，会不断触发调整大小。我在此处设置了一个新演示：http://jsfiddle.net/gnKsE/ 警告此链接会使您的ie7浏览器崩溃。

我能想到这个问题的一个解决方案是在触发后立即关闭resize事件，然后在我在其中运行代码后重新设置它。像这样：

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

function functionName() {

    var throttleTimer,
        testCount = 1;


    function turnOnResize() {
        jQuery(window).on({
            "resize.anyname": function(){
                jQuery(window).off(".anyname");
                jQuery("ul.testList").prepend("<li>Resize event: " + testCount + "</li>");
                testCount++;
                setTimeout(function() {
                    turnOnResize();
                }, 50);
            }
        });
    }
    turnOnResize();

};

Answer 1

另一个解决方案是让你的调整大小处理程序检查窗口的宽度是否已经改变。这样，您可以忽略不是由调整大小的窗口引起的调整大小事件。另见：window.resize event firing in Internet Explorer

尝试这样的事情：

jQuery(document).ready(function($){
    var lastWindowHeight = window.innerHeight, // Could use $(window).height() but $(window) is expensive
        lastWindowWidth = window.innerWidth,
        testCount = 1;

    // Handles all resize events (which for IE7 includes when _anything_ in the DOM is resized)
    function resizeHandler() {
        if (lastWindowHeight !== window.innerHeight || lastWindowWidth !== window.innerWidth )
            windowResizeHandler.apply(this, arguments);
    }

    // Handles resize events that result from the window changing size
    function windowResizeHandler() {
        lastWindowHeight = window.innerHeight;
        lastWindowWidth = window.innerWidth;
        $("ul.testList").prepend("<li>Resize event: " + testCount + "</li>");
        testCount++;
    }

    $(window).on("resize", resizeHandler);
});

窗口调整大小事件在ie7中不断触发

1 个答案: