ホームページ >ウェブフロントエンド >jsチュートリアル >スロットルバルブとデバウンシングの基本的な実装方法の紹介

スロットルバルブとデバウンシングの基本的な実装方法の紹介

不言
不言転載
2019-04-13 11:53:002292ブラウズ

この記事では、スロットルバルブとデバウンシングの基本的な実装方法を紹介します。一定の参考価値があります。必要な友人は参考にしてください。お役に立てれば幸いです。

スロットルバルブthrottle

トリガーされたイベントは、リアルタイムではなく定期的に実行されます。まるで水が滴る蛇口のよう。

function throttle (fn, delay) {
  // 利用闭包变量时效性
  let timeout
  let arg
  return function () {
    arg = arguments
    if (!timeout) {
      timeout = setTimeout(() => {
        fn.apply(this, arg)
        timeout = null
      }, delay)
    }
  }
}
// demo
/*
var test = throttle(function (a) {console.log(a)}, 1000)
test(1) // 不执行
test(2) // 不执行
test(3)
=> 3
test = null // 不需要时释放内存
*/

デバウンス debounce

最後のイベント (エレベーターのドアなど) から N ミリ秒後にトリガーします。

rreeee

以上がスロットルバルブとデバウンシングの基本的な実装方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。