JavaScript防抖、节流

JavaScript防抖

函数防抖就是在函数需要频繁触发情况时
     只有足够空闲的时间，才执行一次。
     好像公交车司机会等人都上车后才出站一样。
防抖就是防止事件频繁触发，针对最后一次触发才执行函数
<!-- 场景 -->
<!-- 实时搜索、拖拽 -->

html

   <input type="text" id="inp">

js

		let oInp = document.getElementById('inp');
        function ajax(e) {
            // console.log(ss.target.value)
            console.log(e, this.value)
        }
        // es6写法
        function debounce(handler, delay) {
            let timer = null;
            return function () {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    handler.apply(this, arguments);
                }, delay)
            }
        }
        oInp.oninput = debounce(ajax, 1000)

        // 传统写法
        // function debounce(handler, delay) {
        //     let timer = null;
        //     return function () {
        //             clearTimeout(timer);
        //             let _self = this, _arg = arguments
        //             timer = setTimeout( function() {
        //                 handler.apply(_self,_arg);
        //             },delay)
        //     }
        // }

JavaScript节流

  在前端开发中有一部分的用户行为会频繁的触发事件执行，
  而对于DOM操作、资源加载等耗费性能的处理，很可能导致
  界面卡顿，甚至浏览器的崩溃。函数节流(throttle)和
  函数防抖(debounce)就是为了解决类似需求应运而生的。

<!-- 节流 -->
节流就是只在单位的时间内才触发该事件
<!-- 函数节流就是预定一个函数只有在大于等于执行周期时才执行，
     周期内调用不执行。好像水滴攒到一定重量之后才落下一样。 -->

<!-- 场景 -->

<!-- 窗口调整、页面滚动、抢购疯狂点击 -->

html

   <div id="show">0</div>
    <button id="btn">点击</button>

js

		let oDiv = document.getElementById('show');
        let oBtn = document.getElementById('btn');
        function throttle(handler,wait){
            let lastTime = 0;
            return function (e){
                let nowTime = new Date().getTime();
                if(nowTime - lastTime > wait){
                    handler.apply(this,arguments);
                    lastTime = nowTime;
                }
            }
        }
        function buy(e){
            console.log(this,e)
            oDiv.innerText = parseInt(oDiv.innerText) + 1;
        }
        oBtn.onclick = throttle(buy, 1000)

实现逻辑：通过时间戳的对比来进行事件的操作以及控制

注 ： 防抖 节流 的好处就是防止过分的触发事件执行函数，导致浏览器性能降低或者体验不好