window.onresize が複数回トリガーされる問題の解決策_JavaScript スキル

以前拡張機能を作成したとき、ウィンドウサイズを変更するときにページが正常に表示されることを確認する必要があったため、window.onresize を使用していましたが、後から、onresize のたびにページのステータスが間違っていることがわかりました。 onresize イベントが複数回トリガーされていることがわかったので、解決策をオンラインで収集して整理しました。
//
onresize イベントがトリガーされる回数については、Safari、Opera、Firefox ではすべて 1 回です (テストにはそれぞれ 1 つのバージョンのみが使用され、すべて新しいものです)。 ;
//ie6 では、quirk で 2 回、standard で 3 回トリガーされます。ie7 と 8 では、quirk と standard で 2 回トリガーされます。

コードをコピー コードは次のとおりです。

window.onresize = function(){
console .log( 'hello world');
}
onresize が何回トリガーされるかは問題ではありません。重要なのは解決策です。複数回トリガーされた場合は、に割り当てられた関数を呼び出します。 onresize Once
//
//デバウンスという言葉をどう訳していいのかわかりません、お兄さん、私は専攻出身ではないので、あまり笑われないよう簡単には訳しません。 。 :)
//
var debounce = function (func, Threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = argument; 🎜>関数遅延 () {
if (!execAsap)
func.apply(obj, args)
if (timeout)
clearTimeout; (タイムアウト);
else if (execAsap)
func.apply(obj, args);
timeout(遅延, しきい値 || 100); >

// コードは私が書いたものではないことを説明してください。
// コードの説明:
debounce は 3 つのパラメーターを受け入れます。最後の 2 つはオプションです。最初のパラメーターはデバウンスする関数で、2 番目はデバウンスの時間間隔を表し、3 番目は期間の始まりです。または関数の実行を終了します。
debounce はラップされた関数を返します。関数の 2 つの実行間隔は少なくともしきい値であり、しきい値間隔未満の呼び出しはタイミング (2 つの呼び出し間の時間間隔) を再開します。 ;
Put clearTimeout( timeout ) timer = null に置き換えます。返された関数の 2 回の実行間隔は少なくともしきい値であり、しきい値間隔未満の呼び出しはタイミング (2 回の呼び出し間の時間間隔) を再開します。

// onresize への複数の呼び出しを解決します




コードをコピー

コードは次のとおりです: window.onresize = debounce( function(){ alert( ' hello world'); }, 100, true)

// デバウンスは自動補完でも使用され、サーバーへのリクエストの数を減らします。連続したキーストロークの間隔が特定の値より大きい場合にのみ、ajax が送信されます。