JS フロントエンド関数のスロットリングにおける setTimeout の賢い使用法

機能スロットルとは何ですか?

関数のスロットルとは、関数が短期間に連続して呼び出されないようにすることを意味します。たとえば、最も一般的なことは、ウィンドウがズームされているときに、次のような他の操作関数を実行することがよくあります。 ajax リクエストの送信など。待機しているときにウィンドウをズームすると、複数のリクエストを連続して送信することができますが、これは私たちが望んでいることではありません。また、マウスを移動してタブを切り替える一般的な効果もありません。場合によっては連続的かつ迅速に出力すると、ちらつき効果が発生しますが、この時点では機能スロットルを使用して操作できます。ご存知のとおり、ウィンドウをズームするときに多数の DOM 操作が要素にバインドされると、DOM 操作は非常に負荷がかかり、パフォーマンスに影響を与えます。たとえば、IE では大量の連続計算が発生します。 DOM 操作が発生すると、ブラウザのパフォーマンスに影響が生じ、ひどい場合にはブラウザがクラッシュする可能性があります。現時点では、関数スロットリングを使用してコードを最適化できます~

関数スロットルの基本原則:

setTomeout() 関数を使用して一定時間遅延させるなど、タイマーを使用して関数の実行を最初に遅延させます。関数の実行後、この期間中に他のイベントがトリガーされた場合は、clearTimeout() メソッドを使用してタイマーをクリアし、その後 setTimeout() で新しいタイマーを使用して実行をしばらく遅らせることができます。

最近、あるチームがプロジェクトで忙しく、従来のモードで開発されているページがあります（なぜ React を使用しないのかについて不満を述べています）。DOM 操作が多く、パフォーマンスが比較的悪いです。 、特にウィンドウを拡大したり縮小したりすると、ひどいことが起こり、遅延が発生し、ブラウザがクラッシュすることもあります。なぜ？

このページには多くの DOM 操作が含まれているため、ウィンドウがズームされると関数の実行がフレームごとにトリガーされ、DOM 操作が継続的に繰り返されるため、ブラウザーにとって非常に負荷がかかります。ウィンドウがズームされるとブラウザは DOM を再計算しますが、なぜ DOM の計算を遅らせて、再計算する前にウィンドウのズームを停止することができないのでしょうか? これにより、ブラウザのオーバーヘッドが節約され、最適化効果が得られます。

知識の準備

1. もちろん、setTimeout(code, millisec) がこの記事の主役です。

setTimeout() メソッドは、指定されたミリ秒数の後に関数または計算式を呼び出すために使用されます。

コードが必要です。呼び出される関数の後に実行される JavaScript コードの文字列。

ミリ秒が必要です。コードを実行する前に待機するミリ秒数。

ヒント: setTimeout() はコードを 1 回だけ実行します。複数回呼び出す場合は、setInterval() を使用するか、コード自体で setTimeout() を再度呼び出すようにします。

タイマー、カルーセル、アニメーション効果、自動スクロールなどで広く使用されています。

2.clearTimeout(id_of_setTimeout)

パラメータ id_of_settimeout setTimeout() によって返される ID 値。この値は、キャンセルされる遅延実行コード ブロックを識別します。

3. fun.apply(thisArg[, argsArray])

apply() メソッドは、この値とパラメーターを指定して関数を呼び出します (パラメーターは配列または配列のようなオブジェクトの形式で存在します)

構文この関数の機能は call() メソッドとほぼ同じです。唯一の違いは、call() メソッドがパラメータ リストを受け入れるのに対し、apply() は複数のパラメータを含む配列 (または配列のようなオブジェクト) を受け入れることです。

Parameter

thisArg

fun 関数の実行時に指定される this の値。指定された this 値は、関数の実行時に必ずしも実際の this 値であるとは限らないことに注意してください。関数が非厳密モードの場合、その関数はグローバル オブジェクト (ブラウザーのウィンドウ オブジェクト) を自動的にポイントします。 null または unknown として指定されます)、値がプリミティブ値 (数値、文字列、ブール値) である this は、プリミティブ値の自動ラッピング オブジェクトを指します。

argsArray

配列または配列に似たオブジェクト。その配列要素は個別のパラメーターとして fun 関数に渡されます。このパラメータの値が null または未定義の場合、パラメータを渡す必要がないことを意味します。 ECMAScript 5 以降では、配列のようなオブジェクトが使用できるようになりました。

既存の関数を呼び出す場合、その関数に this オブジェクトを指定できます。これは現在のオブジェクト、つまりこの関数を呼び出しているオブジェクトを指します。 apply を使用すると、メソッドを一度作成すると、それを別のオブジェクトに継承できるため、新しいオブジェクトにメソッドを繰り返し記述する必要がありません。

4. fun.call(thisArg[, arg1[, arg2[, ...]]])

このメソッドは、指定された this 値といくつかの指定されたパラメーター値を使用して特定の関数を呼び出します。

関数を呼び出すときに、別の this オブジェクトを割り当てることができます。これは現在のオブジェクト、call メソッドの最初のパラメータを指します。 call メソッドを使用すると、Object.prototype.toString.call([]) など、あるオブジェクトのメソッドを別のオブジェクトから借用できます。これは、Object オブジェクトのメソッドを借用する Array オブジェクトです。

関数:

callメソッドを使用して親コンストラクターを呼び出します

callメソッドを使用して匿名関数を呼び出します

callメソッドを使用して匿名関数を呼び出し、コンテキストの「this」を指定します

ここに余談を挿入します:

apply は call() と非常に似ていますが、違いはパラメータの提供方法にあります。 apply は、引数のリストではなく、引数の配列を使用します。 apply では、fun.apply(this, ['eat', 'bananas']) などの配列リテラル、または fun.apply(this, new Array('eat', 'bananas' )) などの配列オブジェクトを使用できます。引数オブジェクトを argsArray 引数として使用することもできます。引数は関数のローカル変数です。 これは、呼び出されるオブジェクトの任意の未指定パラメータとして使用できます。 この方法では、apply 関数を使用するときに、呼び出されるオブジェクトのすべてのパラメーターを知っている必要はありません。 引数を使用して、呼び出されたオブジェクトにすべての引数を渡すことができます。 呼び出されたオブジェクトは、これらのパラメータの処理を担当します。

ECMAScript バージョン 5 以降では、[0...length) の範囲内の length プロパティと integer プロパティを持つ限り、あらゆる種類の配列のようなオブジェクトを使用できます。たとえば、NodeList や、{'length': 2, '0': 'eat', '1': 'bananas'} のような自己定義オブジェクトを使用できるようになりました。

call メソッドと apply メソッドの違いは、call メソッドのパラメータが 2 番目のパラメータから順番に借用したメソッドにパラメータとして渡されるのに対し、apply はこれらのパラメータを直接配列に入れてから渡し、最後にパラメータを渡すことです。借用したメソッドのパラメータリスト 同じです。

アプリケーションシナリオ: パラメータが明確な場合は call を使用でき、パラメータが明確でない場合は apply を使用して引数を結合できます

それでは例を示します

ご存知のとおり、onscoll、onresize などは非常にパフォーマンスが高く、ウィンドウをズームすると数値が表示されます。

var count = ;
window.onresize = function () {
count++;
console.log(count);
}

Chrome ブラウザでブラウザ ウィンドウのサイズを拡大縮小し、次のように印刷します

これは明らかに私たちが望んでいることではありません。ajax リクエストに変更すると、ウィンドウは一度拡大縮小され、継続的にトリガーされます。複数の Ajax リクエスト、関数スロットルを使用してみます。もちろん、settimeout() タイマーを追加します。

最初のカプセル化メソッド

var count = ;
function oCount() {
count++;
console.log(count);
}
window.onresize = function () {
delayFun(oCount)
};
function delayFun(method, thisArg) {
clearTimeout(method.props);
method.props = setTimeout(function () {
method.call(thisArg)
}, )
}

は、クロージャを構築し、タイマーを格納するプライベート スコープを形成するクロージャー。タイマーはパラメーターを渡すことによって導入されます。

var count = ;
function oCount() {
count++;
console.log(count);
}
var funs= delayFun(oCount,);
window.onresize = function () {
funs()
};
function delayFun(func, wait) {
var timer = null;
return function () {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
func.apply(context, args);
}, wait)
};
}

ここでは関数が返されますが、連続して呼び出されると実行されません。この関数は、呼び出しが停止されてから N ミリ秒後に再度呼び出されるまで実行されません。 「immediate」パラメータが渡された場合、関数は遅延なくただちに実行キューにスケジュールされます。

function delayFun (func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// 用法
var myEfficientFn = delayFun (function() {
// 所有繁重的操作
}, );
window.addEventListener('resize', myEfficientFn);

setTimeout は非常に強力なので、プロジェクトで広範囲に使用できますか?

私たちのビジネスでは、setTimeout をビジネス ロジックで使用することは基本的に禁止されています。これは、私が見た使用方法の多くは簡単に解決できる問題であり、setTimeout はハックとして使用されているためです。

たとえば、インスタンスが初期化されていない場合、このインスタンスを使用するのは間違った解決策であり、インスタンスを使用するときに setTimeout を追加して、インスタンスが最初に初期化されるようにすることです。

なぜ間違っているのですか？これは実際にはハックを使用する方法です

1つ目は、罠を仕掛けてモジュールのライフサイクルを混乱させることです

2つ目は、問題が発生したときにsetTimeoutをデバッグするのが実際には難しいということです。