JavaScript的函数节流

title: JavaScript的函数节流
date: 2018-10-30 21:37:46
tags: [JavaScript]
categories: JavaScript

前言

我在我的网易云音乐项目中，因搜索歌曲的需求，需要监听输入框的oninput事件。
但后来发现我的数据库接受请求次数有些异常，原来是用户每一次输入过程中都会向后端发送请求，非常浪费性能。
之后搜索并了解到js的函数节流，有效解决了这一问题，便有了这篇博客。

函数节流的原理

函数节流的原理就是定时器。
当我触发一个时间时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行，就是这样。

代码实现

定义一个节流函数：

function throttle(fn, delay){
    var timer = null;
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    };
};

调用：

this.view.$el.on('input', '#search',(e)=>{
    event(e)
})    
let event = this.throttle((e)=>{
    let val = $(e.currentTarget).val()
    //...发送AJAX请求
}, 800, 1500)   

理论上这样写很完美了，但仍存在一种问题：如果输入框一直在输入文字，文字就一直不会显示出来。我们需要做一个处理：使得文字在超过某个时间间隔后要输出一次。
优化代码：

function throttle(fn, delay, mustRunDelay){
    var timer = null;
    var t_start;
    return function(){
        var context = this, args = arguments, t_curr = +new Date();
        clearTimeout(timer);
        if(!t_start){
            t_start = t_curr;
        }
        if(t_curr - t_start >= mustRunDelay){
            fn.apply(context, args);
            t_start = t_curr;
        }
        else {
            timer = setTimeout(function(){
                fn.apply(context, args);
            }, delay);
        }
    };
 };

注：本文参考资料