防抖与节流

防抖

防抖是指触发高频事件后n秒内函数只执行一次，如果n秒内高频事件再次触发，则重新计算时间。
防抖动是将多次执行变为最后一次执行

• 思路： 每次触发事件之时都取消之前的延时调用方法
• 应用： 按钮点击事件/input事件，防止用户多次重复提交

 function debounce(fn,await) {
       let timeout = null; // 创建一个标记用来存放定时器的返回值
       return function () {
           clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
           timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
               fn.apply(this, arguments);
           }, await);
       };
   }
   function sayHi() {
       console.log('防抖成功');
   }

   var inp = document.getElementById('inp');
   inp.addEventListener('input', debounce(sayHi,500)); // 防抖

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
节流是将多次执行变成每隔一段时间执行

• 思路： 每次触发事件时都判断当前是否有等待执行的延迟函数
• 应用： 鼠标/触摸屏的mouseover/touchmove事件、页面窗口的resize事件、 滚动条的scroll事件

function throttle(fn,await){
        let await = await || 250;
        let laster,timer;
        return function(){
            let now = new Date();
            if(laster && now - laster -await<0){
                clearTimeout(timer);
                timer = setTimeout(() => {
                    laster = now;
                    fn.apply(this,arguments);
                },await)
            }else{
                laster = now;
                fn.apply(this,arguments);
            }
        }
   }
   
    //调用方法
   $('body').on('mousemove', throttle(function (event) {
       console.log('tick');
   }, 1000));