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


本文摘自PHP中文网,作者不言,侵删。

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

节流阀throttle

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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毫秒后触发,如电梯门。

1

2

3

4

5

6

7

8

9

10

11

function debounce (fn, delay){

  let timeout

  return function(){

    const args = arguments

    clearTimeout(timeout)

    timeout = setTimeout(() => {

      fn.apply(this, args)

    }, delay)

  }

}

// 用法同throttle

以上就是节流阀和去抖动的基本实现方法介绍的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

如何使用canvas画一个微笑的表情(代码示例)

javascript的this的用法详解

javascript charat()方法是什么

javascript函数是什么

javascript如何给div设置高度

js怎么设置css实现隐藏

javascript怎样实现累加

javascript数组怎么删除所有元素

javascript怎么设置高

javascript定时器怎么停止

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...