节流和防抖

节流

固定频率下执行一些操作，比如联想输入

    function throttle(fn, delay) {
      let flag = true, // 加锁
          timer = null;
      return function (...args) {
        let context = this;
        if(!flag)return; // 如果还在固定频率内，不进行任何操作直接返回
        flag = false;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
            flag = true;
        }, delay)
      }
    }

防抖

在限定时间内续触发某个操作，仅执行最后一次操作，比如拖动弹窗需要不断计算并改变位置

    function debounce(fn, delay) {
      let timer = null;
      return function(...args) {
        let context = this;
        if(timer)clearTimeout(timer); // 清除上一次的延迟器，取消事件触发
        timer = setTimeout(function() {
          fn.apply(context, args);
        },delay)
      }
    }

核心setTimeout

节流——已有任务，直接返回
防抖——已有任务，重新定义

在Vue中的使用

new Vue({
    data() {
        return {
            throttle: null
        }
    },
    mounted() {
        this.throttle = throttle(()=>{
            // do something
        },1500)
    },
    methods: {
        exec() {
            this.throttle()
        }
    }
})