js 防抖节流

函数节流

当某一事件在持续发生时,我们希望在一定时间内才会触发一次函数,假如说某商城中 商品抢购,使用脚本去执行抢购他会一直去请求后端从而返回结果给我们。这样会大大的增加后端的请求数量，并有可能导致浏览器崩溃，从而我们使用节流方式 当到达了时间点才让他执行一次。举个栗子：

 <div id="count">0</div>
 <button id="btn">click</button>
    <script>
        var oDiv = document.getElementById('count');
        var oBtn = document.getElementById('btn');
        oBtn.onclick = throttle(click, true,2000);
        const throttle = function (fn, immediate = false, interval = 500) {
            let timer = null
            return function () {
                if (immediate) {
                    fn.apply(this, arguments)
                    immediate = false
                }
                if (!timer) {
                    timer = setTimeout(() => {
                        clearTimeout(timer)
                        timer = null
                        fn.apply(this, arguments)
                    }, interval)
                }
            }
        }

        function click() {
　　　　　　　　//模拟后端请求
             oDiv.innerText = parseInt(oDiv.innerText) + 1;
        }
      </script>

每单击按钮都会使div的数量加1并且隔两秒才有效

防抖

在一段时间内的连续函数调用,只让其执行一次

 <input type="text" id="input">
    <script>
        var oInput = document.getElementById('input');
        oInput.oninput = debounce(change, 1000);

        function change(e) {
            console.log(e, this.value);
        }
        /**
         * fun 回调方法
         * wait 每次在范围内执行一次的时间
         * immediat 是否立即执行
         */
        function debounce(fun, wait, immediat) {
            return function() {
                if (this.timerId) {
                    clearInterval(this.timerId);
                }
                if (immediat) {
                    //立即执行
                    let callNow = !this.timerId;
                    this.timerId = setTimeout(_ => {
                        fun.apply(this, arguments);
                    }, wait)
                    if (callNow) fun.apply(this, arguments);
                } else {
                    //非立即执行
                    this.timerId = setTimeout(_ => {
                        fun.apply(this, arguments);
                    }, wait)
                }
            }
        }
</script>