节流阀和去抖动的基本实现方法介绍_建站学-个人建站指南,网页制作,网站设计,网站制作教程

本篇文章给大家带来的内容是关于节流阀和去抖动的基本实现方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

节流阀throttle

触发的事件以周期的形式去执行，而非实时。如滴水的水龙头。

01function throttle (fn, delay) {
02  // 利用闭包变量时效性
03  let timeout
04  let arg
05  return function () {
06    arg = arguments
07    if (!timeout) {
08      timeout = setTimeout(() => {
09        fn.apply(this, arg)
10        timeout = null
11      }, delay)
12    }
13  }
14}
15// demo
16/*
17var test = throttle(function (a) {console.log(a)}, 1000)
18test(1) // 不执行
19test(2) // 不执行
20test(3)
21=> 3
22test = null // 不需要时释放内存
23*/

去抖动debounce

事件最后一次触发的N毫秒后触发，如电梯门。

01function debounce (fn, delay){
02  let timeout
03  return function(){
04    const args = arguments
05    clearTimeout(timeout)
06    timeout = setTimeout(() => {
07      fn.apply(this, args)
08    }, delay)
09  }
10}
11// 用法同throttle

(责任编辑：yang)

搜索

热门标签:

节流阀和去抖动的基本实现方法介绍