JS フロントエンド関数 throttling_javascript スキルでの setTimeout の賢い使用法

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

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

機能スロットリングの基本原則:

最初にタイマーを使用して関数の実行を遅らせます。たとえば、この期間中に他のイベントがトリガーされた場合は、 setTomeout() 関数を使用します。タイマーをクリアするには、setTimeout() メソッドを使用して実行をしばらく遅らせます。

最近、あるチームがプロジェクトで忙しくしています。これは従来のモードで開発されていますが、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() は複数の配列 (または配列のようなオブジェクト) を受け入れることです。パラメータ）。

パラメータ

thisArg

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

argsArray

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

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

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

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

パラメータ

thisArg

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

引数1、引数2、...

指定されたパラメータのリスト。

関数を呼び出すときに、別の 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 メソッドの違いは、2 番目のパラメーターから開始して、呼び出しメソッドのパラメーターが借用メソッドにパラメーターとして渡されるのに対し、apply はこれらのパラメーターを配列に直接入れて渡し、最後にお借りしたメソッドのパラメータリストも同様です。

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

例を挙げてみましょう

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

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

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

これは明らかに私たちが望んでいることではありません。ajax リクエストに切り替えると、ウィンドウが 1 回ズームされ、複数の 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)
};
}

2 番目の方法を最適化すると、パフォーマンスが向上します

これは、中断せずに呼び出された場合には実行されない関数を返します。この関数は、呼び出しが停止されてから 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 をデバッグするのが実際には難しいということです。

ライフサイクルを見て(「ソフトウェアのライフサイクルについて」を参照)、インスタンス化に言及してから使うのが正しい使い方だと思います。

JS での setTimeout の賢い使い方とフロントエンド関数のスロットリングについては、編集者がここで紹介しますので、お役に立てれば幸いです。