DOMさらにonResizeイベント

StackOverflow https://stackoverflow.com/questions/1500312

  •  19-09-2019
  •  | 
  •  

質問

私はこれを持っている場合は、

window.onresize = function() {
  alert('resized!!');
};
全体で

My機能がトリガーされます複数回ののリサイズが、私はサイズ変更のの完了をのキャプチャしたいです。これはIEである。

任意のアイデア？ （例えば、IEのはずwindow.onresizeendイベントが。）があり、様々なアイデアが出てありますが、今のところ私のために働いていません。

役に立ちましたか？

解決

この場合、私は希望の強くのデバウンスを示唆しています。私が見つけたJavaScriptでこれを行うための最も簡単な効果的な、かつ信頼性の高い方法は、ですベンAlmanのjQueryプラグイン、スロットル/デバウンスする（jQueryを使ってたりすることなく使用することができる - 私が知っている...奇妙に聞こえる）。

デバウンスでは、これを実行するコードは、のように簡単になります 

$(window).resize($.debounce(1000, function() {
   // Handle your resize only once total, after a one second calm.
   ...
}));

誰かを助けることができると思います。 ;）

他のヒント

私はリサイズ後に何かをしたいとき

私はいつもこれを使用しています。 setTimeoutとclearTimeoutへの呼び出しは、サイズ変更のスピード上の任意の顕著な影響ではないので、これらは複数回呼び出されることは問題ではないのです。

var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(func, 100);
}

このは完璧ではないのですが、それはあなたが必要スタートを与える必要があります。

var initialX = null;
var initialY = null;
var lastResize = null;
var waiting = false;
var first = true;
var id = 0;

function updateResizeTime()
{
    if (initialX === event.clientX && initialY === event.clientY)
    {
        return;
    }

    initialX = event.clientX;
    initialY = event.clientY;

    if (first)
    {
        first = false;
        return;
    }

    lastResize = new Date();            
    if (!waiting && id == 0)
    {
        waiting = true;
        id = setInterval(checkForResizeEnd, 1000);
    }
}

function checkForResizeEnd()
{
    if ((new Date()).getTime() - lastResize.getTime() >= 1000)
    {
        waiting = false;
        clearInterval(id);
        id = 0;
        alert('hey!');
    }
}

window.onresize = function()
{
    updateResizeTime();
}

あなたは本当に複数のイベントがあるので、複数のイベントを取得します。 Windowsが何回かやってあなたは、ウィンドウをドラッグすると（デフォルトでは、あなたは私が思う、レジストリで変更することができます）でリサイズをアニメーション化します。

あなたはどうする可能性は、遅延を追加することです。 clearTimeout、setTimout（myResize、1000）たびにIEのイベントが発生しています。その後、最後のものだけでは、実際のサイズ変更を行います。

これは役立つかもしれないかどうかわからないが、それは完璧に動作しているようだから、ここにあります。 私は以前の記事から抜粋を取り、少しそれを変更しました。関数doCenter（）は最初のEMおよび物体の幅をsubstracts、その結果を左マージンとして割り当てられている2で余りを分割よりPXを変換します。 doCenter（）オブジェクトをセンタリングするために実行されます。ウィンドウが再び）（doCenterを実行リサイズされ、タイムアウトが発生します。

function doCenter() {
document.getElementById("menuWrapper").style.position = "fixed";
var getEM = (window.innerWidth * 0.063);
document.getElementById("menuWrapper").style.left = (getEM - 40) / 2 + "em";
}

doCenter();

var timeOut = null;
var func = function() {doCenter()};
window.onresize = function(){
    if (timeOut != null) clearTimeout(timeOut);
    timeOut = setTimeout(func, 100);
};

簡単な純粋なJavaScriptのソリューション、ちょうどより多くの応答性を低くするために1000年int型の値を変更する

        var resizing = false;
        window.onresize = function() {
            if(resizing) return;
            console.log("resize");
            resizing = true;
            setTimeout(function() {resizing = false;}, 1000);
        };

私は最後に余分な括弧があることと思いますけれども、私は、ピムイェーガーのエレガントなソリューションが好きで、私は多分のsetTimeoutがあるべきだと思う「TIMEOUT = setTimeoutメソッド（FUNC、100）;」

ここで...

（demo_resize（）と呼ばれる定義された関数を仮定して）道場を使用して私のバージョンです 
var _semaphorRS = null;
dojo.connect(window,"resize",function(){
 if (_semaphorRS != null) clearTimeout(_semaphorRS);
 _semaphorRS = setTimeout(demo_resize, 500);
 });

注：私のバージョンでは、末尾の括弧が必要です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top