zoukankan      html  css  js  c++  java
  • 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)
    }

    运行结果:

  • 相关阅读:
    常见银行编码收集
    kafka集群在消息消费出现无法找到topic分区的处理解决
    find命令通过排序只保留最新的文件目录
    Git fetch和git pull的区别
    git 常用命令
    wordpress模板修改及函数说明
    webbench进行压力测试
    git存储用户名与密码
    导出putty配置
    一个成功的Git分支模型
  • 原文地址:https://www.cnblogs.com/zdkjob/p/11211660.html
Copyright © 2011-2022 走看看