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


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

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

相关阅读 >>

jquery的after方法怎么用

javascript有什么用?

es6中generator函数的用法介绍

javascript canvas方法有哪些

classname和a href 的实例详解

jsp写javascript用什么标签

javascript中的注释如何使用

javascript数组删除的方法有哪些

介绍javascript 内存管理+如何处理4个常见的内存泄漏

javascript菜单如何实现

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




打赏

取消

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

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

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

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

评论

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