1

以下の状況で可能かどうか知りたいです。$.resize()次の関数があるとしましょう:

$(window).resize(function(){
    if($(window).width() < 500) console.log('Small');
});

Smallウィンドウのサイズが 500 未満である限り、上記のログが記録されることはわかっています。つまり、ウィンドウのサイズを 500 から 200 に変更すると、Small約 300 回ログが記録されます。

つまり、実際にそのような状況で重い機能を実行している場合、サイズ変更をやめるか状況が変わるまでブラウザが何度も実行されるため、ブラウザがクラッシュする可能性があります。

そのため、条件が最初に発生したときにのみその仮想関数を実行する方法があるかどうかを尋ねています。

4

5 に答える 5

4

oneイベントが最初に発生したときにのみ、渡された関数を 1 回実行するイベント バインドを使用します。

$(window).one("resize", function(){
    if($(window).width() < 500) console.log('Small');
});
于 2012-05-14T15:35:15.103 に答える
2

これはうまくいくはずです

$(window).resize(function(){
    // apply whatever you want to do with it, other conditions etc... 
    // regardless of what you want to do, the following line unbinds the resize event 
    // from within the handler.. consider calling this once all your conditions are met
    $(window).unbind("resize");
});

このハンドラーはコードを実行し、resizeイベントのバインドを解除しますwindow

編集：条件を削除しました。このコードの目的は、 を呼び出しunbind、シナリオに最適な条件を適用する方法を示すことです。

編集 2unbind :上記のコードで提示した方法で、コメントの 1 つに対処すると、最終的にresizeイベントのすべてのハンドラーがアンバインドされます。より良いアプローチは、次のように別のメソッドでイベント ハンドラーを宣言することです。

var Window_Resize = function(e) {
   // code goes here
};

$(window).resize(Window_Resize);

バインドを解除するには、これを使用します

$(window).unbind(Window_Resize)

このようにして、その特定のハンドラーのみを削除します。他のハンドラーは引き続きこのイベントにバインドされます。

于 2012-05-14T15:35:21.147 に答える
2

onejqueryでイベントハンドラーを使用してそれを行うことができます。

http://api.jquery.com/one/

このような

$(window).one('resize', function(){alert('lol');});
于 2012-05-14T15:36:40.227 に答える
1

考えられる解決策は 2 つあります。ウィンドウのサイズを初めて変更するときにハンドラーを実行する場合は、一度だけ実行するように強制できます。

$(window).one('resize', function () {
    if ($(window).width() < 500) console.log('Small');
});

しかし、問題があります。文字通り一度しか実行されません。再度サイズ変更して大きくするとどうなりますか?

解決策は、一定期間内にウィンドウのサイズが変更された場合にのみコードを実行する「許容範囲」ゾーンを導入することです。

var RESIZE_TOLERANCE = 200; // milliseconds

var last_resize = 0;

$(window).resize(function () {
    var current_time = (new Date()).getTime();

    if (current_time - last_resize < RESIZE_TOLERANCE) {
        return; // stop
    }

    last_resize = current_time;

    if ($(window).width() < 500) console.log('Small');
});

これにより、サイズ変更ハンドラーが 1 秒あたり最大 5 回実行されます。必要に応じて許容範囲を変更できます。

ただし、次の状況を考えてみてください: 999px から 998px にサイズを変更し、サイズ変更ハンドラーを起動します。次に、200ms が経過する前に 998px から 200px にサイズ変更します。問題は、サイズ変更イベントを見逃したことです。

はるかに優れた解決策は、現在の小さな状態を追跡し、状態が変化した場合にのみ重いコードを実行することです。

var RESIZE_TOLERANCE = 100; // milliseconds
var SMALL_TOLERANCE = 500; // pixels
var last_resize = 0;
var small = $(window).width() < SMALL_TOLERANCE;

$(window).resize(function () {
    var current_time = (new Date()).getTime();

    if (current_time - last_resize < RESIZE_TOLERANCE) {
        return; // stop
    }

    last_resize = current_time;

    var is_small = $(window).width() < SMALL_TOLERANCE;

    if (is_small !== small) {
        // run expensive code here
        small = is_small;
    }
});

現在、許容範囲は 100 ミリ秒です。これは、ウィンドウの幅をそれ以上再計算しないことを意味します。(必要に応じて削除または変更できます。) 画面の状態が変化した場合にのみ、高価なコードを実行します。これがあなたが探しているものかどうかはわかりませんが、要件が微妙に異なる場合は、創造的になる必要があります.

于 2012-05-14T15:47:08.797 に答える
0

率直な答えは次のとおりです。

$(window).resize(function(){
  if($(window).width() < 500 && !ranfirst) {
    ranfirst = true;
    console.log('Small');
  }
});

これはおそらくあなたが考えているようには機能しませんが、質問の言い回しは満たしています。ウィンドウのサイズをポーリングするためにタイムアウトを設定ranfirstし、サイズが 10 秒ほど変わらない場合は設定を解除する必要がある場合があります。

于 2012-05-14T15:37:24.953 に答える