事件节流和防抖

Posted 2021-08-23 菜鸟级小白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件节流和防抖相关的知识，希望对你有一定的参考价值。

1、事件节流

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="input">
  <script>
    //  // 事件节流: 设置一个时间间隔，时间间隔内只允许执行一次如果在这个时间间隔内多次触发，也只执行一次
    function throttle(fn, wait) {
      var context = this
      let lastTime = 0
      return function(...args) {
        let now = + new Date()        // + 将事件格式改为数字型的时间字符串
        if((now -lastTime) > wait) {
          fn.apply(context, args)
          lastTime = now
        }
      }
    }

    var input = document.querySelector("#input")
    input.oninput = throttle(fn,2000)
    function fn() {
      console.log(111)
    }
  </script>
</body>
</html>

2、事件防抖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">asdsad</button>

  <script>
  //  防抖函数：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
    function debounce(func, wait) {
      var timeout
      return function () {
        var context = this
        console.log(this)
        var args = arguments
        clearTimeout(timeout)
        timeout = setTimeout(function() {
          func.apply(context,args)
        },wait)
      }
    }

    var btn = document.querySelector("#btn")
    function fn() {
      console.log(111)
    }
    btn.onclick = debounce(fn,1000)
  </script>
</body>
</html>

以上是关于事件节流和防抖的主要内容，如果未能解决你的问题，请参考以下文章