js防抖和节流

最新推荐文章于 2024-09-16 08:47:17 发布

奔赴星空

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量146

点赞数 1

分类专栏： js 文章标签：前端开发防抖节流性能优化 JavaScript

本文链接：https://blog.csdn.net/m0_56133013/article/details/124040522

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html：

<body>
  <input type="text" class="inp">
</body>

js：

 let inp = document.querySelector('.inp')
  let timer = null
  let flag = true
  
  //防抖
    inp.oninput = function () {
    clearTimeout(timer)
    timer = setTimeout(() => {
      console.log(inp.value)
    }, 1500)
  }
  
  //节流
   inp.oninput = function () {
    if (!flag)  return
    flag = false
    setTimeout(() => {
      console.log(inp.value)
      flag = true
    }, 2000)
  }