遅延イベント処理を使用してサイズ変更イベントを効率的に処理するにはどうすればよいですか?

サイズ変更イベントの遅延イベント処理

JavaScript でサイズ変更イベントを処理する場合、サイズ変更プロセス中に複数の呼び出しが発生するのが一般的です。これにより、パフォーマンスの問題や望ましくない動作が発生する可能性があります。これに対処するには、遅延イベント処理アプローチの使用を検討してください。

setTimeout() と clearTimeout() の使用

1 つの効果的な解決策は、setTimeout() と clearTimeout を利用することです。 () 関数。その仕組みは次のとおりです:

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

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

このソリューションでは:

• resizew 関数は、指定された遅延 (この場合は 100) の間サイズ変更イベントが発生しなかった後にのみ呼び出されます。
• clearTimeout() は、以前のサイズ変更イベントによってトリガーされた保留中の resizew 呼び出しをキャンセルするために使用されます。
• setTimeout() は、遅延後に新しい resizew 呼び出しをスケジュールし、それが 1 回だけ発生するようにします。最後のサイズ変更イベントの後。

このアプローチにより、サイズ変更イベントが終了するまでアクションを延期でき、複数の実行を防ぐことができます。

以上が遅延イベント処理を使用してサイズ変更イベントを効率的に処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。