js函数节流和去抖动

绝地灬酷狼 2023-07-09 06:24 41阅读 0赞

# 1.搜索框的事件监听 #

类似百度的那种自动的提示搜索框，需要动态监听输入框值变化。使用onkeydown,onkeypress,onkeyup这些事件监听的话，是无法监听鼠标右键的复制，剪贴和粘贴操作的。使用oninput事件是可以解决鼠标右击操作的，但是oninput事件不完全兼容IE9，这时可以再绑定IE 特有的 onpropertychange事件达到兼容的效果。

$('textarea').on('input propertychange', function() {
        // ...
    });

# **[2][].js函数节流和抖动** #

就是在输入框里**每次输入一个字就发送一次搜索请求，这对服务器肯定会造成压力。**

我就输入了一个“小”字就发送了5四请求：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

我使用的是百度搜索的接口，所以我就来问一下百度是怎么解决的。发现百度搜**索也是每输入一个拼音就发送一次请求的**。人家是百度嘛，多发几个请求也没什么的啦

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70 1][]

使用js函数节流和去抖动的方法可以缓解这种频繁的事件的触发。频繁的事件触发像window对象的resize、scroll事件，mousemove、mousedown.、keydowm、keyup等事件。

解决方法有两种：debounce和throttle

## **1.debounce去抖动** ##

### **利用定时器，让函数执行延迟500毫秒，在500毫秒内如果有函数又被调用则删除上一次调用，这次调用500毫秒后执行，如此往复。****就是当你停止输入500毫秒才会执行函数** ###

function debounce(method,context){
        clearTimeout(method.timeout); // 清空上一个定时器
        method.timeout = setTimeout(function(){
         method.call(context);//执行传入的回调函数  
       },500)
    }

这里传入的methos是触发事件回调函数，context是要调用回调函数的作用域

这里传入的method是触发事件回调函数，context是要调用的回调函数的作用域

// 方法二：
    function debounce(method,delay){
        var timer = null; 
        return function(){
            var context = this,args = arguments;
            clearTimeout(timer); 
            timer = setTimeout(function(){
                method.apply(context,args); 
            },delay);
        }
    }

这里传入的method是触发事件回调函数，delay是延迟的时间。

我使用的是第一种方法，设置搜索的延迟时间为500毫秒。

search:function(ev){
        //30代表上键，40代表下键
        if(ev.keyCode==38||ev.keyCode==40){
            return;
        }
        if(ev.keyCode==13){
                window.open('https://www.baidu.com/s?wd='+this.searchstr);
                this.searchstr='';             
        }
        clearTimeout(this.timer);
        var $tt = this;
        this.timer = setTimeout(function(){
            $tt.getSearchList();
        }, 500);
    }

其中getSearchList()就是执行搜索的方法，使用拼音输入法输入“小”字的时候搜索请求的次数为1次： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70 2][]

1.throttle节流

节流与抖动不一样，节流是会说预先设定一个执行周期，当调用动作的时刻大于扥话语执行周期则执行该动作，然后进入下一个新周期。拿onscroll事件来说，如果使用的是抖动的话，只用当滚动停止后才会执行回调函数，在滚动的过程是不会执行的。节流不同，滚动的时候每隔一个时间周期会执行一次回调，然后进入下一个新周期

[2]: https://blog.csdn.net/aliguagua/article/details/78633309
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200228111227105.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200228111710338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200228112723166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70