js防抖和节流

防抖和节流一般应用于高频事件频繁触发的场景，如窗口大小改变，下拉加载，搜索等，可有效避免事件处理函数被频繁调用造成性能差的问题。

一、防抖和节流区别

防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

防抖：指定时间内只执行一次，但在等待时间内再次触发事件，重新开始延时。

节流：指定时间内只执行一次。

二、防抖和节流介绍

1、防抖

防抖应用场景 – 搜索功能，实时响应用户输入，给出相关的建议词。
通常查询某个词，会频繁触发按键事件，如果每次都执行事件处理函数，不仅会产生没必要的数据请求，还会影响用户体验，因此该场景特别适合用防抖处理。

函数防抖示例：

//事件处理函数
function handle(arg){
    //事件处理代码
    console.log('事件处理函数-'+arg);  //事件处理函数-keydownArg
}

//防抖
function debounce(fn, delay){
    let timer = null;
    return function(){
        let content = this;
        let args = arguments;
        if(timer) clearTimeout(timer)
        timer = setTimeout(function(){
            fn.apply(content, args);
        }, delay)
    }
}

//事件绑定
var input = document.getElementById("input"); 
input.onkeydown = debounce(function(){
    handle('keydownArg')
}, 500)

2、节流

节流应用场景 – 窗口大小改变，下拉加载等。
当改变窗口大小（或下拉加载）时，会频繁触发onresize（或onscroll）事件，调用事件处理函数，造成性能和体验方面的影响，节流可以避免频繁调用处理函数。

函数节流示例：

//事件处理函数
function handle(){
    // 事件处理代码
    console.log('事件处理函数-'+arg); //事件处理函数-resizeArg
}
// 防抖处理
function throttle(fn, delay){
    let timer = null;
    return function(){
        if(timer) return false;
        let content = this;
        let args = arguments;
        timer = setTimeout(function(){
            timer = null
            fn.apply(content, args);
        }, delay)
    }
}

//事件绑定函数
window.onresize = throttle(function(){
    handle('resizeArg')
}, 500)