文档章节

防止快速重复点击的两种思维

黄威
 黄威
发布于 10/21 21:59
字数 726
阅读 19
收藏 0

防止重复执行的两种思维

场景

  1. 下单时,提交按钮,因为网络卡顿或者手快重复点击,导致重复提交订单;
  2. 微博,更新个人状态或发表评论时,快速多次点击[发送]按钮,导致相同的信息发送多次.

解决思路

快速多次点击的特点:

  1. 时间间隔小;
  2. 时间分布比较密集

思路一:第一次执行,第二次视为无效

每次触发就记下一个时间戳标记(lastTimeMillSencond),
第二次触发就拿当前时间戳和lastTimeMillSencond 比较,如果小于某个阈值,则表示属于重复点击,视为无效,
然后更新lastTimeMillSencond
示例:

new MouseInputListener() {
            private long lastTimeMillSencond;

            @Override
            public void mouseClicked(MouseEvent e) {
                long currentTime = System.currentTimeMillis();
                long delta = currentTime - lastTimeMillSencond;
                System.out.println("delta##### :" + delta);
                if (delta < 1000) {
                    System.out.println("双击无效");
                    lastTimeMillSencond = System.currentTimeMillis();
                } else {
                    lastTimeMillSencond = System.currentTimeMillis();
                    // 执行业务逻辑;
                    // 执行业务逻辑
                }
            }
}

思路二:最后一次视为有效

比如提交订单,防止快速重复点击导致重复提交,使用JavaScript 的throttle
步骤:
第一次触发时,启动定时器,指定时间间隔之后执行;
第二次触发时,清空之前的定时器,使之失效,然后重新启动定时器;
第三次触发时,清空之前的定时器,使之失效,然后重新启动定时器;
第 n次,以此类推

/***
 * 需要注意:分支二走完之后,需要清空t_start 吗?<br>
 *     如果不清空,会有这种情况:执行完分支二之后,马上执行分支一<br>
 *         e.g:var func3=throttle3(myFunc,2000,2100);<br>
 *         需要保证:(1)连续频繁地点击,则每隔runDelay 秒,必须执行一次;<br>
 *         (2)随意的乱点击,一定会执行至少一次<br>
 *         定时器执行时,需要重置t_start,否则执行完分支二之后,马上执行分支一<br>
 * @param fn
 * @param delay : 延迟执行的倒计时,如果多次调用,新的会把旧的倒计时冲掉
 * @param runDelay
 * @returns {Function}
 */
function throttle3(fn, delay, runDelay, scope) {
    var timer = null;
    var t_start;
    return function () {
        //没有传递参数runDelay,但是传递scope
        if (runDelay && (typeof runDelay != 'number') && (!scope)) {
            scope = runDelay;
        }
        var context = scope || this,
            args = arguments,
            t_cur = new Date();
        // console.log(context);
        timer && clearTimeout(timer);
        if (!t_start) {
            t_start = t_cur;
        }
        // console.log('t_start:'+t_start);
        // console.log('t_cur:'+t_cur);
        // console.log('t_cur - t_start:'+(t_cur - t_start));
        //runDelay的类型等于Constant.Type_undefined,表示没有传递参数runDelay
        if ((typeof runDelay != Constant.Type_undefined) && (t_cur - t_start >= runDelay)) {
            fn.apply(context, args);//分支一
            t_start = t_cur;
            // console.log('一:' + new Date());
        } else {
            timer = setTimeout(function () {//分支二
                fn.apply(context, args);
                // console.log('二:' + new Date());
                t_start = new Date();
            }, delay);
        }
    }
}

调用:

window.imgClick2 = (window.throttle3 ? throttle3(originImgClick2, 500) : originImgClick2);

总结

© 著作权归作者所有

共有 人打赏支持
黄威
粉丝 17
博文 59
码字总数 34435
作品 0
昌平
程序员
私信 提问
如何快速使用MindManager快速创建思维导图模板

绘制一幅完整的思维导图第一步就是要开始新建一个导图,MindManager提供了多种方式帮助用户新建导图,包括新建空白导图、使用模板创建导图以及从外面导入文件等等,本文将简要介绍五种方式教...

软件达人
2015/04/01
0
0
ReentrantLock锁的使用场景

摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些。 场景1:如果发现该操作已经在执行中则不再执行(有状态执行) a、用在定时任务时,如果任务执行时间可能超过...

双月通天
2016/06/07
30
0
转自ReentrantLock可重入锁的使用场景

摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些。 场景1:如果发现该操作已经在执行中则不再执行(有状态执行) a、用在定时任务时,如果任务执行时间可能超过...

java1990
2014/01/15
0
0
ReentrantLock可重入锁的使用场景

摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些。 场景1:如果发现该操作已经在执行中则不再执行(有状态执行) a、用在定时任务时,如果任务执行时间可能超过...

NoahX
2013/01/11
0
17
谈谈防止重复点击提交

首先说说防止重复点击提交是什么意思。   我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转。这...

五大三粗
2015/12/26
216
0

没有更多内容

加载失败,请刷新页面

加载更多

当程序员有了中年危机 你会发现你就是个屁

前言 程序员是一个怎样的存在?引用一句鸡汤的名言来说:你以为你用双手改变了世界,实际上是苍老了自己。为什么我今天会抛出这个话题,其实我也是一个懵懂的少年,我也曾经为了成为一名程序...

架构师springboot
6分钟前
0
0
大型网站B2C商城项目实战+MongoDB+Redis+zookeeper+MySQL

本文列出了当今计算机软件开发和应用领域最关键部分,如果你想保证你现在以及未来的几年不失业,那么你最好跟上这些技术的发展。虽然你不必对这十种技术样样精通,但至少应该对它们非常熟悉。...

java知识分子
6分钟前
1
0
大型企业网络系统集成方案如何设计?

网络系统集成是企业实现无纸化办公和即时通讯办公的基础建设,在以生产效率为核心竞争力的市场中,企业想要快速获取信息并有效提高企业工作效率及业务能力,企业网络系统集成是必不可少的,由...

Java干货分享
7分钟前
0
0
Spring应用学习——IOC

1. Spring简介 1. Spring的出现是为了取代EJB(Enterprise JavaBean)的臃肿、低效、脱离现实的缺点。Spring致力于J2EE应用的各层(表现层、业务层、持久层)的解决方案,Spring是企业应用开...

江左煤郎
8分钟前
0
0
用Redis轻松实现秒杀系统

导论 曾经被问过好多次怎样实现秒杀系统的问题。昨天又在CSDN架构师微信群被问到了。因此这里把我设想的实现秒杀系统的价格设计分享出来。供大家参考。 秒杀系统的架构设计 秒杀系统,是典型...

James-
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部