ホームページ > 記事 > ウェブフロントエンド > JavaScript_html/css_WEB-ITnose の関数スロットリングについて
JavaScript_html/css_WEB-ITnose の関数スロットリングについて
- WBOYオリジナル
- 2016-06-21 08:53:31808ブラウズ
関数スロットルの原理
関数スロットルは、頻繁にトリガーされる関数イベントに制限を設け、これらの関数が一定の間隔または毎回の要件を満たすことができるようにすることです。 . 特定の条件下で再度発動。通常、私たちは彼にスロットルという名前を付けます。つまり、スロットルを意味します。一般に、このような関数には、size イベント、ontouchmove イベントなどが含まれます。
簡単な例を示します
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>测试函数节流</title> <style> #container{ width: 100%; height: 200px; border: 1px solid #646464; color: #000000; } </style></head><body > <div id="container"></div></body><script> function alertSomething(){ alert("您的鼠标正在移动"); }; document.getElementById("container").onmousemove = alertSomething;</script></html>
上記のコードは単純に div をレンダリングし、マウス移動イベントを div にバインドします。しかし、実際の状況では、このイベントは非常に頻繁にトリガーされるため、この経験は良いものではありません。この div 上でマウスを移動している限り、このブロック イベント アラートがポップアップ表示されるため、定期的に「マウスが動いている」ことが通知されることを期待します。
以下にスロットル関数 throttle() を記述します。
function throttle(func){ var timer; return function(){ var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function(){ func.apply(context,args); },1000); } } 次に、ページ上のコードを変更します。
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>测试函数节流</title> <style> #container{ width: 100%; height: 200px; border: 1px solid #646464; color: #000000; } </style></head><body > <div id="container"></div></body><script> function throttle(func){ var timer; return function(){ var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function(){ func.apply(context,args); },1000); } } function alertSomething(){ alert("您的鼠标正在移动"); }; document.getElementById("container").onmousemove = throttle(alertSomething);</script></html> このスロットリング機能について詳しく説明します。
この関数はクロージャーを使用してタイマー変数を保存します。正直に言うと、他の人がこのスロットリング関数を書いているのを初めて見たとき、私はそれが初めてのことになるまで、簡単に理解できませんでした。自分で実装しましたが、理解できました。ここで十分な衣食住を用意して、自分で行うことをお勧めします~~
もちろん、このタイマー変数はグローバル スコープに記述することもできますが、グローバル スコープの変数と競合する可能性があるため、ここではクロージャの形式で記述されています。グローバル スコープを汚染するのを防ぐために提供されています。 (ここで「汚染」を使っている人が多いです。グローバル スコープにタイマーなどの変数がたくさんあると、グローバル スコープでよく使われる変数と混同しやすいのかもしれません。このスロットリング機能をタイマーとして使用するだけです)。
次に、スロットル関数によって返される関数があります。この関数では、渡された実行コンテキストとパラメーター引数を保存する必要があります。注意すべき点は、setTimeout() 関数のスコープがグローバルであることです。つまり、setTimeout の this は実際にはコンテナ オブジェクトであり、渡されるパラメータはすべてマウスの動きです。情報: このコンテナ オブジェクトのマウス移動イベント関数をalertSomething関数に書き換えます。同時に、マウスの移動イベントの情報もパラメータとして渡されます。これは、通常はわかっていることかもしれませんが、なぜこのようになるのでしょうか。関数のパラメーターと実行コンテキストがどのように渡されるのか、関数 elementobj.onmousemove=function(){xxxxxx} が直接呼び出されるとき、コンテキストとパラメーターがどのように渡されるのかもこの原則に基づく必要があります。これは私の個人的な理解です。
上記の基本原理を理解した上で、スロットル関数がどのように機能するのかを整理してみましょう。このスロットル関数が初めて呼び出されるのは、マウス移動イベントが初めてトリガーされるときであり、タイマーは Yes ではないため、 clearTimeout(timer) によってクリアされるタイマーはありませんが、マウス移動イベントが 2 回目にトリガーされると、マウス移動イベントの処理関数は常に throttle によって返される関数になります。まず、最後の通話のタイマーがクリアされ、次に新しいタイマーが設定されます。この処理はマウスが移動するたびに実行され、1 秒間マウスが移動しなくなるまでタイマーの機能は使用されません。
とにかく、このプロセスをよく理解するのは気持ちが良いです！
しかし、遅延イベントをカスタマイズする必要がある場合はどうすればよいでしょうか?
function throttle(func,delay){ var timer; return function(){ var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function(){ func.apply(context,args); },delay); } }function dealMouseMove(){ alert("您的鼠标正在移动");};document.getElementById("container").onmousemove = throttle(dealMouseMove,500);