js防抖和节流

客官°小女子只卖身不卖艺 2023-06-30 05:24 1阅读 0赞

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

## 一、防抖和节流区别 ##

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

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

## 二、防抖和节流介绍 ##

### 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)