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


本文摘自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

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

相关阅读 >>

五个超好用的array.from()用途(详解)

javascript如何删除数组里的某个元素

javascript自定义函数的写法是什么

关于html、js的一些用法小技巧

javascript主要有哪些数据类型

javascript事件委托的技术原理

详解使用 javascript 解析 url的方法

浅谈javascript中的事件委托

介绍我们是如何搭建互动应用

javascript中onload和load的区别是什么?

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




打赏

取消

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

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

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

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

评论

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