JavaScript防抖与节流

2023-12-29 22:33:29

以监听输入表单和鼠标移动事件为例，使用闭包实现。（也可以通过时间戳实现）

应用场景：提交表单，高频监听事件

<!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>
  <input placeholder="请输入">
  <div id="box"></div>
  <script>
    // 提交表单
    let getInput = document.querySelector('input')
    getInput.addEventListener('input', antiShake(demo, 2000))
    function antiShake(fn, wait) {
      let timeOut = null
      return args => {
        if (timeOut) clearTimeout(timeOut)
        timeOut = setTimeout(fn, wait)
      }
    }

    function demo() {
      console.log('发起请求');
    }
    // 高频监听事件
    let box = document.querySelector('#box')
    box.addEventListener("mousemove",throttle(demo,2000))

    function throttle(event,time){
      let timer = null
      return function(){
        if(!timer){
          timer = setTimeout(()=>{
            event()
            timer = null
          },time)
        }
      }
    }


  </script>
</body>
<style>
  #box {
    background-color: aqua;
    width: 200px;
    height: 200px;
  }
</style>

</html>

节流：一定时间内的多个事件合为一个

防抖：固定时间内，事件只允许发生一次

文章来源:https://blog.csdn.net/qq_62939177/article/details/135238883
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。