手写防抖原理&&节流原理,亲历面试题

1、防抖：

  // 防抖：函数的防抖就是在函数需要频繁触发时，留有足够的空间，才会执行一次。
 // 当一次事件触发完以后，隔了一段时间，都没有在触发这个事件，就执行
var Inp = document.getElementById("Inp");

   function debounce(handler, delay) {
       var timer = null;
       return function () { //返回一个函数
           var _this = this, arg = arguments;
           clearTimeout(timer);
           timer = setTimeout(() => {
               handler.apply(_this, arg);  //_this = this 将this指向改为Inp
           }, delay)
       }
   }

   function ajax(e) {
       console.log(e, this.value);
   }
   Inp.oninput = debounce(ajax, 1000);


        /*防抖应用场景：
           实时搜索(keyup)
           拖拽(mousemove)*/

2、节流：

 /*节流：就是预定的一个函数只有在大于等于执行周期时才执行，周期内调用不
 执行，如同水滴积攒一定重量才会下落 */
<div id="num">0</div>
<button id="btn">count</button>
<script>
    var oDiv = document.getElementById("num");
    var oBtn = document.getElementById("btn");
        
    function trottle(handler,wait){
        var lastTime = 0;
        return function(){
            var _this = this;
            var nowTime = new Date().getTime();
            if(nowTime - lastTime > wait){
                handler.apply(_this,arguments);
                lastTime = nowTime;
            }
        }
    }

    function ajax(e){
        console.log(e,this);
        oDiv.innerText = parseInt(oDiv.innerText) + 1;
    }
    oBtn.onclick = trottle(ajax,1000);

        /*应用场景：
                窗口调整(resize)
                页面滚动(scroll)
                抢购疯狂点击(mousedown)*/
</script>