利用防抖和节流提高性能

防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗。

防抖

当持续触发事件时，只有在一定时间段内没有再触发事件后，事件处理函数才会执行一次。

应用场景：

1. input输入框搜索功能
2. window触发resize的时候
3. 监听浏览器滚动时，最后触发某个事件

以Input输入框搜索为例：

没有防抖时，在输入时不停的触发事件，不停的请求接口加大了性能的损耗

防抖代码如下：

function debounce (fn,delay) {
    let timer = null
    return function () {
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(fn,delay)
    }
}
function search () {
    console.log('搜索')
}
document.getElementById('ipt').oninput = debounce(search,500)

这样我们可以看到，设置了停留500ms后再触发事件，就大大降低了事件的触发次数，节约请求资源

节流

在规定的时间间隔内，就算重复触发函数，也只成功调用一次

应用场景：

1. 鼠标不断点击触发
2. 监听滚动条滚动时，根据滚动条位置触发某个事件
3. input输入框搜索也可以使用节流

代码如下：

function debounce (fn,delay) {
    let timer = true
    return function () {
        if(!timer){
            return false
        }
        timer = false
        setTimeout(() => {
            fn()
            timer = true;
        }, delay)
    }
}
function search () {
    console.log('搜索')
}
document.getElementById('ipt').oninput = debounce(search,1000)

可以看到，不管我触发多少次事件，都只会每隔1s才触发一次