Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

什么是防抖和节流?有什么区别?如何实现? #135

Open
xiaotiandada opened this issue May 6, 2023 · 0 comments
Open

什么是防抖和节流?有什么区别?如何实现? #135

xiaotiandada opened this issue May 6, 2023 · 0 comments

Comments

@xiaotiandada
Copy link
Owner

xiaotiandada commented May 6, 2023

防抖(Debounce)和节流(Throttle)是常用的用于控制函数执行频率的技术。

防抖:

防抖的目的是确保在频繁触发事件时只执行一次函数,而且是在最后一次触发事件后的一段时间间隔之后执行。
当事件被触发后,会设置一个定时器,在指定的时间间隔内如果再次触发该事件,则会取消之前的定时器并重新设置一个新的定时器。只有当事件停止触发一段时间后,才会执行最后一次触发的函数。
适用场景:输入框搜索,窗口大小调整等需要等待用户停止操作后才执行的场景。
节流:

节流的目的是控制函数执行的频率,确保函数在一定时间间隔内只执行一次。
当事件被触发后,会设置一个定时器,在指定的时间间隔内只能执行一次函数。如果在该时间间隔内再次触发事件,函数不会被执行,直到时间间隔过去后,才能再次执行函数。
适用场景:滚动事件,页面resize等需要控制函数执行频率的场景。
区别:

防抖是在最后一次触发事件后的一段时间间隔后执行函数,而节流是在固定的时间间隔内只执行一次函数。
防抖适用于等待用户停止操作后才执行的场景,而节流适用于控制函数执行频率的场景。
实现防抖和节流的方式有很多,下面是简单的实现示例:

防抖的实现:

function debounce(func, delay) {
  let timer

  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func(args)
    }, delay)
  }
}

节流的实现:

function throttle(func, dealy) {
  let timer;

  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        func(args);
        timer = null;
      }, dealy);
    }
  };
}

以上代码中,func 是要执行的函数,delay 是延迟的时间间隔。通过使用闭包保存定时器的引用,以及使用setTimeout和clearTimeout函数来控制函数的执行。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant