javascript 中的防抖和节流操作

最新推荐文章于 2024-06-04 15:13:52 发布

ShetePro

最新推荐文章于 2024-06-04 15:13:52 发布

阅读量739

点赞数 2

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zlejan/article/details/122397013

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

javascript 中的防抖和节流

防抖和节流的使用场景

在javascript 中经常会用到一些监听事件，比如 scrollView 、mousemove 等事件。在使用这些事件的回调函数时，如果回调逻辑复杂一些，就会导致页面卡顿。那么使用防抖和节流就能有效提升页面流畅度。除了上述的事件，也可用于多次点击事件等。

防抖和节流的介绍

防抖和节流一般需要使用setTimeout 方法

防抖（debounce）
防抖是指在多次调用时，只在最后一次调用回调时生效。需要使用setTimeout定义一个超时时间。如果在超出时间内又触发了防抖事件，那么就会使定时器重新计时。

  var timeout = null // 定义定时器对象
  // 在body 元素上监听鼠标移动事件
  document.body.onmousemove = (e) => {
  	// 判断定时器是否存在
    if (timeout) {
      // 清除上一个计时器
      clearTimeout(timeout)
    }
    timeout = setTimeout(() => {
      console.log('mouseMove') // 结束移动打印一次 mouseMove
    }, 500)
  }

上方的代码在body内监听mousemove 事件，如果不加定时器,只要你鼠标在body上移动，控制台就会打印非常多的 "mouseMove" 但是加了防抖后，变为了只在鼠标结束移动后才执行定时器内的代码。

mousemove 为鼠标移动事件 clearTimeout 方法将会清除定时器

节流（throttle）
节流是指在多次调用时，限制调用的频率，比如在mousemove 事件中，我们不需要鼠标停止移动时执行操作，而是限制每500毫秒进行一次操作：

  var timeout = false // 定义延迟状态
  // 在body 元素上监听鼠标移动事件
  document.body.onmousemove = (e) => {
  // 如果还没到延迟时间就 rertun
    if (timeout) {
      return false
    }
    // 设置延迟开始
    timeout = true
    setTimeout(() => {
      console.log('mouseMove') // 500ms打印一次 mouseMove
      // 执行代码完成 清空延迟
      timeout = false
    }, 500)
  }