js函数节流和去抖动

搜索框下拉提示–js函数节流和去抖动

1.搜索框的事件监听

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

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

2.js函数节流和去抖动

做好这个功能的时候就发现使用中文输入法进行文字输入的时候，每输入一个拼音就会发送一次搜索请求，这对服务器肯定会造成压力的。
我就输入了一个“小”字就发送了5四请求：

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

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

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

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

这里传入的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次：

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

function throttle(method, delay, time) {
     var timeout,startTime = +new Date();
     return function() {
         var context = this,
         args = arguments,
         curTime = +new Date();
         clearTimeout(timeout);
         // 如果达到了规定的触发时间间隔，触发 handler
         if (curTime - startTime >= time) {
           method.apply(context, args);
           startTime = curTime;
       } else {
           // 没达到触发间隔，重新设定定时器
           timeout = setTimeout(method, delay);
     }
 };