JavaScript:节流&防抖

2024-01-07 19:39:07


节流

什么是节流

在JavaScript中,节流throttle是一种限制函数执行频率的技术。
当一个函数被频繁调用时,节流能够控制函数执行的次数,以避免过多的计算和资源的浪费。

比如说在游戏中,一个技能的释放是有间隔的。当我们释放了一次技能后,只有过一段时间才能再次释放这个技能。这就是一种节流。

节流的实现

接下来我们就写个函数,来实现节流。我会先为大家展示代码,然后进行解析。

实现节流的一种常见方法是使用定时器。基本的节流函数如下所示:

function throttle(func, wait) {
  let timer;
  return function() {
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };
}

该函数接受两个参数:待执行的函数func和等待时间wait

待执行的函数就是我们每隔一段时间需要调用的函数,wait则是在触发一次后,在wait时间内无法再次触发这个函数。

我们首先拆解一下这个函数的大题结构:

function throttle(func, wait) {
  let timer;
  return function() {if (!timer) {...}};
}

其基本结构为:在外层函数throttle设置一个timer变量,然后在内层函数使用了timer变量,并把内层函数作为外层函数的返回值。
这个结构,就是一个标准的闭包结构!(不知道闭包的可以看这篇文章[JavaScript:作用域&变量回收])
那么这个闭包结构有什么用呢?

其保证了 timer这个变量永远不会被销毁,我们在下一次访问这个函数的时候依然可以用上一次留下来的timer,以确定距离上一次的事件也没有到达指定时间。

再看到内层函数:

function() {
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };

timersetTimeout的返回值,当timer为空时,就会执行if语句内部的代码:timer = setTimeout(),此时timer就立刻得到了setTimeout的返回值。
然后setTimeout内部的代码要等待 wait时间后才执行。等到 wait时间后,调用函数func,即我们想要节流的函数。随后将 timer = null;保证下一次使用这个函数可以被执行。
在这个过程中,在setTimeout被调用的瞬间,timer就立刻得到了setTimeout的返回值而不为空。这个时间内, if (!timer)就会判断为false,从而不执行内部代码。当 wait时间后,执行 timer = null;,此时if (!timer)就会判断为true,从而进入下一次节流。


另一种常见的实现节流的方式是使用时间戳。基本的节流函数如下所示:

function throttle(func, wait) {
  let previous = 0;
  return function() {
    let now = Date.now();
    if (now - previous > wait) {
      func.apply(this, arguments);
      previous = now;
    }
  };
}

该函数使用一个变量previous来记录上一次函数执行的时间戳。当函数被调用时,首先获取当前的时间戳,然后与上一次执行的时间戳进行比较。如果两个时间戳之间的间隔大于等待时间,则执行函数,并更新上一次执行的时间戳。否则,不执行函数。

此处也是使用了和刚才一样的闭包结构,唯一的区别就是前面使用setTimeout来控制时间,而此处利用时间戳的减法控制时间。

这两种实现节流的方式都可以达到限制函数执行频率的效果,具体选择哪种方式取决于具体的使用场景和需求。但是两者利用的重要思想都是闭包结构保留变量


防抖

什么是防抖

防抖事件指的是在连续触发某个事件时,只有等到一定的时间间隔内没有再次触发,才会执行该事件。其主要目的是防止事件的频繁触发,从而减少不必要的资源消耗和提升性能。

就好比如moba游戏中的回城效果。如果你点击回城后,再次点击回城,那么先前的回城就会被阻断,重新计时。这就是节流的思想。


防抖的实现

防抖的实现通常是通过定时器实现的。当事件触发时,先清除之前的定时器,再重新设置一个新的定时器,在指定的时间间隔内如果没有再次触发事件,则执行该事件。如果在时间间隔内再次触发了事件,则重新设置定时器,并重置计时。

下面是一个示例,使用JavaScript实现一个简单的防抖事件:

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

上述示例中,使用了debounce函数来实现防抖功能。debounce函数接受一个需要执行的事件处理函数和延迟时间作为参数,返回一个新的函数。当事件触发时,该新函数会清除之前的定时器clearTimeout(timer);,并重新设置一个新的定时器 timer = setTimeout。如果在延迟时间内再次触发了事件,会重置定时器。直到延迟时间内没有再次触发事件时,才会执行事件处理函数。

具体使用:

function handleScroll() {
  console.log('Scroll被触发了');
}

window.addEventListener('scroll', debounce(handleScroll, 200));

在上述示例中,我们在window对象上监听了scroll事件,并使用防抖函数将事件处理函数包裹起来。延迟时间设置为200毫秒,意味着只有在200毫秒内没有再次触发scroll事件时,才会执行handleScroll函数。

同样的,防抖也利用了闭包思想

通过使用防抖事件,可以有效地减少事件的触发次数,提升性能和用户体验。


文章来源:https://blog.csdn.net/fsdfafsdsd/article/details/135384542
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。