javascript - window.onresize が 2 回発生する

Question

私はjsが初めてです。痛いほど蹴らないでください。私はこのコードを持っています

    window.onresize=function() {alert(1);};

ブラウザのウィンドウのサイズを変更すると、この関数が 2 回起動します。なんで？そして、コードが一度起動するようにこのコードを書き直す方法。

事前にサンクス。

Answer 1

サイズ変更イベントをバンドルするにはタイムアウトが必要です。

var res;
window.onresize=function() {
    if (res){clearTimeout(res)};
    res = setTimeout(function(){console.log("resize triggered");},100);
};

ライブの例

Answer 2

このイベントは、さまざまなブラウザーで複数回発生します (サイズ変更が完了したときと、サイズ変更中に発生したものがあります)。

これを回避する 1 つの方法は、イベントが発生してから一定時間 (0.5 秒など) 待機して、さらに更新があるかどうかを確認することです。そうでない場合は、アラートを続行できます。

例えば

var resizeTimer;
window.onresize = function(){
    if (resizeTimer){
        clearTimeout(resizeTimer);
    } 
    resizeTimer = setTimeout(function(){
        alert(1);
        }, 500);
};

このフィドルで動作することを確認してください。

Answer 3

ユーザーがサイズを変更したときに、関数が同じ結果を複数回「起動」するのを防ぐため

var doc = document; //To access the dom only once
var cWidth = doc.body.clientWidth;
var newWidth = cWidth; //If you want a log to show at startup, change to: newWidth = 0
window.onresize = function (){
    newWidth = doc.body.clientWidth;
    if(cWidth != newWidth){
        cWidth = newWidth;
        console.log("clientWidth:", cWidth); //instead of alert(cWidth);
     };
};

Answer 4

タイムアウトが気に入らないので、他の解決策を提案します。

   `var resized;
    window.onresize = function () {
        if(resized){
            resized = false;
        }
        else{
            resized = true;
            alert('resize');
        }
    };`