节流

节流（throttle），控制流量。用于用户和页面发生交互时控制事件发生的频率。

特点

每等待某种间隔结束后，再执行。持续触发并不会执行多次。

代码

let input = document.getElementById('input')

    function throttling(func, wait) {
        let prev = 0;
        let choke = function () {
            let now = Date.now();
            let remain = wait - (now - prev);
            if (remain <= 0) {
                func.apply(this,arguments);
                prev = now;
            }
        }
        return choke
    }

    function logger() {
        console.log('-----logger---',input.value)
    }
    document.addEventListener('input', throttling(logger, 1000))

防抖

防抖（debounce），防止抖动。用于防止用户的操作抖动。

特点

等待某种操作停止之后，加以间隔进行操作。持续触发不执行，触发一段时间之后再执行。

代码

let input  =document.getElementById('input');
   function debounce(func,wait){
       let timer;
       return function(){
           clearTimeout(timer);
           timer=setTimeout(()=>{
               func.apply(this,arguments)
           },wait)
       }
   }
   function logger(){
       console.log('--logger--',input.value)
   }
   input.addEventListener('input',debounce(logger,1000))