4

旧标题：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 限制技术，它应该只在用户停止调整浏览器大小 500 毫秒后将列表项添加到 testList ul 中。基本上它只在每次调整浏览器大小时运行一次 setTimeout 代码，因为在设置它之前是 clearTimeout 。这种技术允许仅在需要时触发代码，而不是在每次调整大小事件时触发代码，每当用户调整浏览器大小时，这可能会触发数十次。

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

我在这里设置了一个演示：http : //jsfiddle.net/cQRjp/

看一下ie7，你会看到问题。有谁知道为什么这在ie7中失败了？

编辑号：1：

我已经剥离了代码，以便在调整窗口大小时，li 元素被添加到页面上的 ul 元素之前，然后计数器增加。而已。

这表明问题在于 ie7 如何解释调整大小事件，与油门计时器无关。似乎在页面前添加 li 项会触发 ie7 中的 resize 事件，因此，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();

};
4

1 回答 1

1

另一种解决方案是让您的调整大小处理程序检查窗口的宽度是否已更改。这样，您可以忽略不是由调整大小的窗口引起的调整大小事件。另请参阅：在 Internet Explorer 中触发 window.resize 事件

尝试这样的事情：

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);
});
于 2012-12-17T17:07:48.123 回答