23

これがあれば

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

私の関数はサイズ変更中に複数回起動されますが、サイズ変更の完了をキャプチャしたいと考えています。これはIEにあります。

何か案は？そこにはさまざまなアイデアがありますが、これまでのところうまくいきませんでした (たとえば、IE の想定される window.onresizeend イベント)。

4

7 に答える 7

31

この場合、デバウンスを強くお勧めします。私が見つけた JavaScript でこれを行うための最もシンプルで効果的で信頼性の高い方法は、Ben Alman の jQuery プラグインである Throttle/Debounce (jQuery の有無にかかわらず使用できます - 私は知っています...奇妙に聞こえます)。

デバウンスを使用すると、これを行うコードは次のように単純になります。

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

誰かを助けることができることを願っています。;)

于 2010-05-20T13:48:32.950 に答える
9

リサイズ後に何かしたい時はいつもこれを使っています。setTimeoutとの呼び出しclearTimeoutは、サイズ変更の速度に顕著な影響を与えないため、これらが複数回呼び出されても問題ありません。

var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(func, 100);
}
于 2010-05-20T13:56:43.710 に答える
5

これは完璧ではありませんが、必要なスタートを切ることができます。

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();
}
于 2009-09-30T20:34:42.037 に答える
4

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

あなたができることは、遅延を追加することです。IE イベントが発生するたびに clearTimeout, setTimout(myResize,1000) を実行します。次に、最後のものだけが実際のサイズ変更を行います。

于 2009-09-30T19:58:56.250 に答える
2

単純な純粋な JavaScript ソリューションです。1000 の int 値を低く変更して、応答性を高めます。

        var resizing = false;
        window.onresize = function() {
            if(resizing) return;
            console.log("resize");
            resizing = true;
            setTimeout(function() {resizing = false;}, 1000);
        };
于 2013-05-21T07:46:02.490 に答える
1

これが役立つかどうかはわかりませんが、完全に機能しているように見えるので、ここにあります. 前回の記事から抜粋して、少し修正しました。関数 doCenter() は、最初に px を em に変換し、次にオブジェクトの幅を引き、残りを 2 で割ります。結果は左マージンとして割り当てられます。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);
};
于 2012-03-12T03:58:23.060 に答える
0

私は Pim Jager のエレガントなソリューションが好きでしたが、最後に余分な括弧があり、おそらく setTimeout は "timeOut = setTimeout(func,100);" であるべきだと思います。

これが Dojo を使用した私のバージョンです (demo_resize() という名前の関数が定義されていると仮定します)...

var _semaphorRS = null;
dojo.connect(window,"resize",function(){
 if (_semaphorRS != null) clearTimeout(_semaphorRS);
 _semaphorRS = setTimeout(demo_resize, 500);
 });

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

于 2011-07-06T12:58:14.730 に答える