节流与防抖

1.节流的核心思想: 如果在定时器的时间范围内再次触发，则不予理睬，等当前定时器完成。

   const throttle = function (fn, interval) {
      if (interval == null || interval == undefined) {
       interval = 2000   // 没传参数时默认为2秒
      }
      let last = 0;
      return function (...args) {
        let context = this;
        let now = +new Date();
        // 还没到时间
        if (now - last < interval) return;
        last = now;
        fn.apply(this, args)
      }
    };
     //模拟一段ajax请求 content传参数
    function ajax(content) {
      console.log('ajax request ' + content)
    }

    let throttleAjax = throttle(ajax, 3000)
    $('#throttle').on('click', function (e) {
      throttleAjax(111)
    })

2.防抖核心思想: 每次事件触发则删除原来的定时器，建立新的定时器。（类似于王者回城）

   function debounce(fn, delay) {
      if (delay== null || delay== undefined) {
       interval = 2000   // 没传参数时默认为2秒
      }
      let timer = null;
      return function (...args) {
        let context = this;
        if (timer) clearTimeout(timer);
        timer = setTimeout(function () {
          fn.apply(context, args);
        }, delay);
      }
    }
    //模拟一段ajax请求 content传参数
    function ajax(content) {
      console.log('ajax request ' + content)
    }
    let debounceAjax = debounce(ajax,1000)
    $('#debounce').on('click', function () {
      debounceAjax(1111)
    })

Tips：对于小程序或者Vue(挂载全局直接调用)中使用节流注意点击事件

const throttleDebounce= require('../../../utils/throttleDebounce')
 //  节流测试
clickDemo: throttleDebounce.throttle(function (e) {
       console.log(e); // 或者ajax请求
},2000),
clickDemoD:throttleDebounce.debounce(function(e){
    console.log(e);
},2000),

总结：防抖是控制次数（比如：2s内点击100次，上一次点击离上一次大于等于2s即算一次，否则不算），节流是控制频率（10秒内点击了100次，节流时间为2s，则算点击5次）