LOGO

JavaScript的防抖与节流


这篇文章主要介绍了什么是JavaScript的防抖与节流,防抖是在频繁触发某一个事件时,一段时间内不再触发该事件后才会去调用对应的回调函数,在设定间隔时间内如果下一次事件被触发, 那么就重新开始定时器,直到事件触发结束,节流看下面文章的具体介绍吧

一、函数防抖(debounce)

1. 什么是防抖?

函数防抖: 在频繁触发某一个事件时,一段时间内不再触发该事件后才会去调用对应的回调函数,在设定间隔时间内如果下一次事件被触发, 那么就重新开始定时器,直到事件触发结束。

规定时间内没有继续触发事件的前提下,再去调用事件处理函数;

具体如下面的例子所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*定义防抖函数
* func:传入一个函数,事件不再持续触发时会调用该函数
* delay:定义持续多久后执行传入的回调函数
* */
function debounce(func,delay) {
let timer = null // 用于保存定时器
return function (...args) {
// 如果定时器存在,清除定时器,随后重新设置timer
if(timer !== null) clearTimeout(timer)
timer = setTimeout(func, delay) // 超过delay为接收到事件会调用这里的func 必要的额时候可以修改func的this指向 由于timer对外部存在引用,因此不会被销毁
}
}

/*事件处理函数*/
function testDeBounce(){
console.log('你看我执行了几次??')
}

// 接收debounce返回的函数
const temp = debounce(testDeBounce(),1000)

/*绑定事件,测试防抖函数*/
window.addEventListener('scroll',()=>{
temp()
}); // 这样写最少调用一次事件处理函数,最多也不会多余下面的写法执行的次数
window.addEventListener('scroll', testDeBounce); // 如果这样写的话,每当页面滚动就会调用事件处理函数

总结一下思路:

  1. 定义一个节流函数
  2. 函数内部使用一个变量保存定时器
  3. 返回一个函数,函数内部定义:如果定时器已经存在就清除定时器,重新设置定时器
  4. 定义一个变量来接收debounce返回的函数
  5. 在事件的回调函数中直接调用上一步的变量接收的方法

二、函数节流

函数节流: 在事件持续触发的前提下,保证一定时间段内只调用一次事件处理函数,就是函数节流;

函数节流实现的方式: 定时器、时间戳、定时器+时间戳;

2.1 定时器实现

思路:

  1. 定义节流函数throttle
  2. 定义timer保存定时器
  3. 返回一个函数。函数内部定义:如果定时器不存在,设置定时器,间隔某一时间后将timer设置为null,如果在这之前事件再次触发,则定时器中的回调无效
    <button>这是一个孤独的按钮</button>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    /*
    * 定义定时器节流函数
    * func:传入事件处理函数
    * delay:在delay指定的时间内定时器回调无效
    * */
    function throttle(func,delay) {
    let timer = null
    const context = this
    return function(...args){
    // 如果定时器不存在
    if(!timer){
    timer = setTimeout(()=>{
    func.apply(context,args) // 考虑返回的函数调用的环境,因此这里不直接使用this
    timer = null // delay之后清除定时器
    },delay)
    }
    }
    }

    function test() {
    console.log('啊啊啊!')
    }

    const temp = throttle(test,1000)

    document.querySelector('button').addEventListener('click',()=>{
    temp()
    })

    2.2 时间戳实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    var throttle = function(func, delay) {            
      var prev = Date.now();
      return function() {
        var context = this;
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
          func.apply(context, args);
          prev = Date.now();
        }
      }
    }

    function handle() {
      console.log(Math.random());
    }

    window.addEventListener('scroll', throttle(handle, 1000));

    2.3 时间戳+定时器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // 节流throttle代码(时间戳+定时器):
    var throttle = function(func, delay) {
    var timer = null;
    var startTime = Date.now();
    return function() {
    var curTime = Date.now();
    var remaining = delay - (curTime - startTime);
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    if (remaining <= 0) {
    func.apply(context, args);
    startTime = Date.now();
    } else {
    timer = setTimeout(func, remaining);
    }
    }
    }

    function handle() {
    console.log(Math.random());
    }

    window.addEventListener('scroll', throttle(handle, 1000));
    到此这篇关于什么是JavaScript的防抖与节流的文章就介绍到这了,更多相关JavaScript的防抖与节流内容请搜索68HTML以前的文章或继续浏览下面的相关文章希望大家以后多多支持68HTML!

文章作者: 68HTML
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 68HTML !
  目录