JavaScript で複数の「サイズ変更」イベント トリガーを防ぐ方法

複数の「resize」イベントトリガーの管理

開発者は、サイズ変更プロセス中に「resize」イベントの複数のトリガーを処理するという問題に遭遇することがよくあります。これにより、望ましくない動作や非効率が生じる可能性があります。目的のアクションのみが 1 回実行されるようにするには、「resize」イベントの「終了」を待つ方法を理解することが重要です。

指定されたコード サンプルで示されているように、一般的なアプローチの 1 つは、$ を使用することです。 (window).resize(function(){resizew();}) メソッド。ただし、このメソッドは、進行中のサイズ変更プロセス中に resizew() 関数を複数回トリガーします。

これを克服するには、setTimeout() メソッドと clearTimeout() メソッドを利用できます。この戦略により、resizew() 関数をトリガーする前に遅延を設定できます。たとえば 100 ミリ秒のタイムアウトを設定すると、サイズ変更が確実に完了するまで特定の時間待機できます。この遅延中に、新しいサイズ変更イベントはタイマーを「リセット」し、サイズ変更プロセスが実際に完了した場合にのみ実行されることを保証します。

このアプローチを説明するコード例を次に示します。

function resizedw(){
    // Haven't resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

このコード サンプルは、jsfiddle にあります。

以上がJavaScript で複数の「サイズ変更」イベント トリガーを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。