javascript 给事件任务一个缓冲区

在编写前端的过程中，经常会监听事件并执行任务，我在这抛出2个比较常见的场景：

1、输入关键字搜索
如果你监听input的chage事件，会有一个问题，在使用中文输入法时，你输入的几个拼音字母都会被触发
我作个实验，输入“毛”，这个change事件被触发了4次，拿到的值依次为 m，ma，mao，毛，这无疑会增加后端的负荷

2、地图刷新
我们需要在用户移动地图后，实时去加载当前区域内的覆盖物，在这个模式下，如果用户在短时间内多次操作地图，显然中间有一些请求是可以忽略掉的

解决办法，我们需要给任务一个缓冲区，比如定个时间，1秒内，无论方法被调用了多少次，都只会执行最后一次，忽略掉前面无效的部分。

话不多说，上代码：

 

/**
 * [delayExcute 延时执行，在指定时间内只执行一次] 
 * @param  {String} taskId [任务标识，区分不同任务]
 * @param  {Function} callback [要执行的过程]
 * @param  {Number}   buffer   [毫秒 默认500]
 */
var delayExcute = function(taskId,callback, buffer) {

    taskId='delayExcute_'+taskId;
    buffer=buffer||500;
    var timedCount = function() {

        clearTimeout(window[taskId])


        window[taskId] = setTimeout(function() {
            callback();
        }, buffer)
    }

    timedCount();

}

//假如用var来申明i，会有惊喜,你可以试试
for(let i=0;i<5;i++){
    delayExcute('a',function(){
        console.log('任务A，第'+i+'次')
    },500)
}

for(let i=0;i<5;i++){
    delayExcute('b',function(){
        console.log('任务B，第'+i+'次')
    },500)
}

运行结果：