js中的节流个防抖

最新推荐文章于 2023-10-20 15:14:13 发布

Mamba_四哥

最新推荐文章于 2023-10-20 15:14:13 发布

阅读量157

点赞数 3

分类专栏： js进阶文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_49405038/article/details/115677436

版权

js进阶专栏收录该内容

30 篇文章

订阅专栏

本文深入探讨了JavaScript中两种重要的函数优化技术——节流和防抖。节流通过限制函数在一定时间内的执行次数，确保其在特定间隔后才执行；而防抖则确保在连续触发事件后，只执行最后一次。文中提供了具体的实现示例，帮助开发者提高代码性能和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节流：在一定时间内函数只执行一次

function throttle(func, waitTime) {
    let lock = false
    return function (e) {
      if (lock) {
        return
      }
      lock = true
      setTimeout(() => {
        func.apply(this, arguments)
        lock = false
      }, waitTime)
    }
  }

  function hello() {
    console.log('节流')
  }

  throttle(hello, 1000)

防抖：在规定时间内只执行函数的最后一次

function debounce(func, waitTime) {
    let timer = null
    return function () {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        func.apply(this, arguments)
      }, waitTime)
    }
  }