实现防抖与节流函数

什么是节流

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行

1.定时器

let box = document.querySelector( ".box")
box.addEventListener( "touchmove", throttle(demo，2000))

function throttle(event，time){
    let timer = null
    return function(){
        if(!timer) {
            timer = setTimeout(() =>{
                event();
                timer = null;
            }, time);
        }
    }
}

function demo(){
    console.log('发起请求')
}

2.时间戳

var throttle = function(fn, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　fn.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

什么是防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

let telInput = document.querySelector( 'input' )
telInput.addEventListener( 'input' , antiShake(demo，2000))

//防抖封装
function antiShake(fn，wait)｛
    let timeOut = null;
    return args =>{
        if(timeout) clearTimeout(timeOut)
        timeOut = setTimeout(fn, wait);
    }
}

function demo(){
    console.log('发起请求')
}