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)

}

运行结果：

巴特西

javascript 给事件任务一个缓冲区

最新文章

热门文章