面试常考点：防抖与节流

防抖（debounce）：某段时间内不管触发多少次，都会重新计算执行时间，只执行最后一次函数。

防抖的使用场景：

1.输入框事件：输入后需要不断发送请求匹配模糊搜索的内容，可以使用防抖减少请求次数

2.浏览器懒加载图片：滚动条不断下拉的触发onscroll事件，可以使用防抖就行优化减少onscroll事件

代码实现：

// 防抖是只执行最后一次
        function debounce(fn, wait) {
            let argThis = this;
            let timer = null;
            let lastArgs;
            function newFn() {
                timer = null;
                fn.apply(argThis, lastArgs);
            }
            return function _debounce() {
                lastArgs = arguments;
                timer && clearTimeout(timer);
                timer = setTimeout(newFn, wait);
            }
        }

 用法：

<input name="" id="input">

let inp = document.querySelector("input");

inp.addEventListener('input', debounce(inpFn, 500), false);
function inpFn(e) {
            console.log("e---->", e.target.value)//输出输入框的值
        }

 

节流（throttle）：某段时间内，不管连续触发多少次只执行一次

节流使用场景:

1.表单提交的按钮点击事件，可以用来避免多次触发提交重复的数据

代码实现：

// 节流是一段时间只执行一次
        function throttle(fn, wait) {
            let argThis = this;
            let lastArgs;
            let applyTime = 0;
            return function _throttle() {
                lastArgs = arguments;
                nowTime = Date.now();//利用时间戳
                if (nowTime - applyTime > wait) {
                    fn.apply(argThis, lastArgs);
                    applyTime = nowTime;
                }
            }
        }

<button id="button">节流按钮测试</button>

let btn = document.querySelector("button");
btn.addEventListener('click', throttle(btnFn, 1000), false);
function btnFn() {
            console.log("按钮事件")
        }

 注意：防抖和节流都需要注意this指向和arguments