函数的防抖和截流

最新推荐文章于 2022-06-30 17:31:28 发布

zhzwei

最新推荐文章于 2022-06-30 17:31:28 发布

阅读量392

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_45958288/article/details/106962359

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟、假死或卡顿的现象。

1. 防抖（debounce）

1.1 什么是防抖

在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

1.2 应用场景

用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；
window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；

1.3 实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box" style="width: 100%; height: 600px; background: #eee;"></div>

  <script>
    function debounce(func, delay) {
      let timer
      return function() {
        clearTimeout(timer)
        timer = setTimeout(() => {
          func.apply(this, arguments)
        }, delay)
      }
    }
    
    let box = document.getElementById('box')
    let handler = debounce(function(e, element) {
      element.innerHTML = `${e.clientX}, ${e.clientY}`
    }, 500)
    box.addEventListener('mousemove', function(e) {
      handler(e, box)
    }, false)
  </script>
</body>
</html>

代码说明：

debounce() 返回的函数是一个闭包；
每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；
只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行；

2.节流（throttle）

2.1 什么是节流

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

2.2 应用场景

鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

2.3 实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box" style="width: 100%; height: 600px; background: #eee;"></div>

  <script>
    function throttle(func, delay) {
      let canRun = true
      return function() {
        if (canRun) {
          canRun = false
          setTimeout(() => {
            func.apply(this, arguments)
            canRun = true
          }, delay)
        }
      }
    }
    
    let box = document.getElementById('box')
    let handler = throttle(function(e, element) {
      element.innerHTML = `${e.clientX}, ${e.clientY}`
    }, 1000)
    box.addEventListener('mousemove', function(e) {
      handler(e, box)
    })
  </script>
</body>
</html>

作者：腾讯云技术社区
链接：https://zhuanlan.zhihu.com/p/51608574
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

zhzwei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
函数的防抖和截流

防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟、假死或卡顿的现象。1. 防抖（debounce）1.1 什么是防抖在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。1.2 应用场景用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让
复制链接

扫一扫