js防抖和节流

防抖

概念

• 标题在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

防抖：<input type="text" name="" id="deb">

<script>
    function debounce(fn, wait) {
        var timeout = null;
        return function (arg) {
            if (timeout !== null) {
                clearTimeout(timeout);
            }
            timeout = setTimeout(function () {
                fn(arg);
            }, wait);
        }
    }
    // 处理函数
    function handle(arg) {
        console.log(arg);
    }

    let inputb = document.getElementById('deb');
    let d = debounce(handle, 1000);// 要单独拿出来 不能放进事件绑定里
    //事件
    inputb.addEventListener('keyup', function () {
        d(inputb.value);
    });
</script>

或者

function handle(content) {
    console.log(content)
}

function debounce(fun, delay) {
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
}

let inputb = document.getElementById('deb')

let d = debounce(handle, 500)

inputb.addEventListener('keyup', function (e) {
    d(e.target.value)
})

节流

概念

• 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

应用场景

• 防止表单多次提交

function throttle(func, delay) {
    var prev = Date.now();
    return function () {
      var context = this;
      var args = arguments;
      var now = Date.now();
      if (now - prev >= delay) {
        func.apply(context, args);
        prev = Date.now();
      }
    }
  }

  function handle() {
    console.log(Math.random());
  }
  window.addEventListener('scroll', throttle(handle, 3000));

上面是网上找的，自己有点笨看了挺久才看懂，context 是为了保存执行环境的 this，args作传值用，只是上面的代码没用到传值，修改一下，感觉容易懂一点

    function throttle(func, delay) {
      var prev = Date.now();
      return function () {
        var now = Date.now();
        if (now - prev >= delay) {
          func();
          prev = Date.now();
        }
      }
    }

    function handle() {
      console.log(1);
    }

    setInterval(throttle(handle, 2000),10);