节流防抖之我见

其实节流防抖我们一直都有接触，但是可能就是不知道它原来叫这个。

一、防抖

定义：在一段时间内触发了n次，但只有一次生效，一般都是开头那次或者结尾的。

应用场景：比如scroll事件或则resize，但是频繁地监听是浪费性能的，所以最好就是做个定时器，如果重复监听到这个事件就清除定时器，取消前面的事件。

 // 防抖
    function deBounce(func, wait) {
      let timeID;

      return function () {
        clearInterval(timeID);

        timeID = setTimeout(func, wait)
      }
    }

    function onScroll() {
      console.log('scrolling~');
    }

    window.addEventListener('scroll', deBounce(onScroll, 1000));

 

二、节流

定义：一段时间内只允许执行一次

应用场景：如scroll事件，scroll如果不做限制，则会不断执行事件，如果事件里还包含了操作dom或者里面还有回调事件，将会大大地增加浏览器的压力，降低用户体验。解决方法可以使用时间戳，第一次点击时响应事件，接下来的再重复触发了事件的话则会1s后再执行事件。

// 节流
    function throttle(func, waitTime) {
      let previous = 0;

      return function (...args) {
        let that = this;
        let now = new Date().getTime();

        if (now - previous > waitTime) {
          func.apply(that, args);
          previous = now;
        }
      }
    }

    function handle() {
      console.log('scrolled')
    }
    window.addEventListener('scroll', throttle(handle, 1000));

 

总结：他们的区别是：防抖就像游戏里的法师施法，可能一直被打断，而节流却是在规定的时间内一定会执行的。比如像scroll事件，你不能真的就一定要等到用户停下滚动才发送请求，不然体验不好，在合理的时间内就该发起请求。