简单的学习一下函数节流与函数防抖

<button id="throttle">测试函数节流</button>
<button id="debounce">测试函数防抖</button>

  //处理事件的回调函数
        function handleClick(i) {
            console.log("处理点击事件");
            console.log(i);
        }

函数节流(throttle)

1.理解:

在函数需要频繁触发时:函数执行一次后,只有大于设定的执行周期后
才会执行第二次，适合多次事件按时间做平均分配触发。

2.场景:

窗口调整(resize)
页面滚动(scroll)
DOM 元素的拖拽功能实现(mousemove)
抢购疯狂点击(mousedown)

        //实现函数节流
        function throttle(callback, delay) {
            let start = 0;//必须保存第一次点击立即调用
            return function () {//它的this是谁就得让callback()中的this是谁，
                //它接收的所有实参都直接交给callback
                console.log("throttle 事件");
                let current = Date.now();
                console.log(current - start);
                if (current - start > delay) {//从第2次点击开始，需要间隔时间超过delay
                    callback.apply(this, arguments);
                    start = current;
                }
            }
        }
        document.getElementById("throttle").onclick = throttle(handleClick, 2000);

函数防抖(debounce)

1.理解:

在函数需要频繁触发时：在规定时间内，只让最后一次生效,
前面的不生效。适合多次事件一次响应的情况

2.场景:

实时搜索联想(keyup)
文本输入的验证(连续输入文字后发生AJAX
请求进行验证，验证一次就好，判断scroll
是否滑到底部，滚动事件+函数防抖
)

        //实现函数防抖
       function debounce(callback, delay) {
            let t = null;
            return function () {
                //清除待执行的定时器
                if (t) {
                    clearTimeout(t);
                    t = null
                }
                //每隔delay的时间，启动一个新的延迟定时器
                t = setTimeout(() => {
                    callback.apply(this, arguments);
                    //执行完毕后，删除标记
                    t = null;
                }, delay);
            }
        }
        document.getElementById("debounce").onclick = debounce(handleClick, 1000);