javascript - 给频繁点击的事件添加一个方法,使其有个延时?
黄舟
黄舟 2017-04-11 12:40:00
[JavaScript讨论组]

在移动开发中会有触发比较频繁的事件,比如抢购时用户快速点击一个按钮,用户滚动屏幕引起图片的懒加载等,请完成下面函数throttle,比如:Func A = function(){};throttle(A,200)会让A隔200ms才执行一次;
//method为传入的方法,delay为延时时间;
注:返回一个函数function throttle(method,delay){}

function throttle(method,delay){
    var timer = setTimeout(function(){
        mathod();
    },delay);
    timer = null;
}

这样写有没有问题?

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(3)
PHP中文网

再次触发,如果上一次还未执行应取消上次执行。

黄舟

抢购时候的狂点,实际情况应该不用限制用户一次只能发一个请求,但发请求也应该有个最小间隔,那样可以用你说的延迟触发。

var flag = 0; //用来表示事件是否触发了。0表示没有触发
btn.onclick = function(){
  if(flag){
     return;   //触发了就跳出函数不执行了
  }
  flag = 1;    //进入执行时候,状态变为1。
  setTimeout(function(){
     flag = 0;
  },200)
  //TODD .....
}

懒加载,或者点击加载之类的,我觉得应该是添加一个状态变量,用来保存目前的状态,一次只能发一个请求吧。
实际情况应该是,点击一次,如果请求还没完成,后面的连续点击都不会有效,这样限制连续点击,这种情况就不是用延迟限制用户连续触发了。
我一般防止连续点击触发时候的写法大概都是:

var flag = 0; 
btn.onclick = function(){
  if(flag){
     return;   //触发了就跳出函数不执行了
  }
  flag = 1;    //进入执行时候,状态变为1。
  //TODD .....
  //这里一般都是异步请求,请求结束后就在回调处理函数中里把flag状态变回0,这样就能进行下次点击了。
}
怪我咯

你没有用 clearTimeout() 来取消定时器,所以,并没有达到“函数节流”的效果。

可以参考代码:

var throttle = function(fn, delay){
    var timer = null;
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    };
 };
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号