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 が設定されているため、ブラウザーのサイズ変更ごとに 1 回だけ実行されます。この手法により、ユーザーがブラウザのサイズを変更するたびに何十回も発生する可能性のあるサイズ変更イベントごとではなく、必要なときにのみコードを起動できます。

これは、ie7 を除くすべてのブラウザーで機能します。奇妙なことに ie7 では、コードは引き続き実行され、リスト項目を ul の先頭に追加するのを停止します。

ここでデモをセットアップしました: http://jsfiddle.net/cQRjp/

ie7 を見ると、問題が表示されます。これがie7で失敗する理由を誰かが知っていますか?

編集番号：1：

ウィンドウのサイズを変更すると、li 要素がページの ul 要素の前に追加され、カウンターがインクリメントされるように、コードを削除しました。それでおしまい。

これは、ie7 がサイズ変更イベントを解釈する方法に問題があることを示しており、スロットル タイマーとは関係ありません。ページの先頭に li アイテムを追加すると、ie7 でサイズ変更イベントがトリガーされるようです。したがって、サイズ変更は継続的に発生します。ここで新しいデモをセットアップしました: http://jsfiddle.net/gnKsE/ 警告 このリンクは ie7 ブラウザーをクラッシュさせます。

この問題に対して私が考えることができる 1 つの解決策は、サイズ変更イベントがトリガーされた直後にオフにし、その中でコードを実行した後に再度設定することです。そのようです：

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 に答える