速记js面试一定会出的防抖和节流

速记js面试一定会出的防抖和节流

简介

**防抖：**触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

**节流：**高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

防抖和节流都是为了限制事件的执行次数，防止出现事件的响应速度跟不上触发的速度，导致出现卡顿延迟的现象。

防抖：

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法。但是如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

下面是写的2个简单的代码演示

一： 
function debounce(fn, wait, flag){
    
    var timeout;
    return function(){
        var self = this;
        clearTimeout(timeout);   

        if(flag){
            // 鼠标第一次进入 timeout 是什么 真 还是假 
            var callNow = !timeout; // 程序的思想  控制timeout的真假来决定 执行FN
            
            timeout = window.setTimeout(function(){
                timeout = null
            }, wait);
            
            if(callNow){
                fn.apply(self);
            }
            
        }else{
            timeout = window.setTimeout(function(){
                fn.apply(self);
            }, wait);
        }


        // 1 timeout 
        // 2 清楚前一次timeout 重新生成第二次timeout
        
    }
}

二：
function debounce(fn,delay) {
    var timeout = null; // 创建一个标记用来存放定时器的返回值
    return function (e) {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}
// 处理函数
function handle() {
    console.log('防抖：', Math.random());
}

节流：

每隔一个周期执行 只要鼠标在动 无限执行（周期）

function throttle(fn, wait){// 
        var pre = 0;// 参照值
       return function(){
            var now = +new Date();//获取 1970年到现在的毫秒数 
            
            var self = this;
            if(now - pre > wait){
                 fn.apply(self);
                 pre = now;//动态设置参照值
             }
            
         }
     }