js控制再次点击按钮之间的间隔时间

最新推荐文章于 2022-12-29 20:15:51 发布
最新推荐文章于 2022-12-29 20:15:51 发布
阅读量2k 收藏
点赞数
分类专栏： asp.net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/setygaspnet/article/details/27077491
版权 
    <script type="text/javascript" language="javascript">

        var wait = 60;       
        function change() {
            $o = $("#J_refresh_checkcode");
            if(wait == 0) {
                $o.removeAttr("disabled");
                $o.html("看不清？换一张");
                wait = 60;             
            } else {
                $o.attr("disabled", true);
                $o.attr("font-color", "gray");
                $o.html(wait + "秒后可重新获取");
                wait--;
                if(wait == 59) {
                    var imgNode = document.getElementById("vimg");
                    imgNode.src = "../../AjaxServer/CheckCodePic.ashx?t=" + (new Date()).valueOf();  // 这里加个时间的参数是为了防止浏览器缓存的问题  
                    $("#J_checkcode_tip").addClass("hide");
                    $("#J_checkcode_tip>div").html("");
                    $("#<%=hidPicMessage.ClientID%>").val("");
                }
                setTimeout(function() {
                    change()
                },
            1000)
            }
        }</script>

则 html如下：


                                <div class="kv_item clear">
                                    <span class="kv_label fl">验证码</span>
                                    <input name="checkCode" class="i_textshort fl" id="J_checkcode_input" οnmοusedοwn="ClearCodeMessage()" type="text" maxlength="6" autocomplete="off" οnblur="CheckCode()" />
                                    <img src="../../AjaxServer/CheckCodePic.ashx" height="28" id="vimg" alt="" style="float:left;margin:-1px 0 0 3px"/>
                                    <a id="J_refresh_checkcode" οnclick="change()">看不清，换一张</a>
                                    <div class="msg msg-inline msg-weak hide" id="J_checkcode_tip">
                                        <div class="msg-default msg-error">
                                            <i class="msg-icon"></i>
                                            <div class="msg-content">
                                            </div>
                                        </div>
                                    </div>
                                </div>


淘气的黑妞_会说话
关注
专栏目录
js控制当再次点击按钮时的间隔时间
10-25
主要介绍通过js如何控制当再次点击按钮是的间隔时间,需要的朋友可以参考下
js控制再次点击按钮之间的间隔时间可防止重复提交
10-25
综上所述，这段JavaScript代码有效地实现了防止用户在短时间内多次点击按钮的功能，确保了每次点击之间的最小间隔，并在等待期间更新按钮的状态和文本提示。这对于防止重复提交和保持系统稳定至关重要，特别是在涉及...
javascript设置连续两次点击按钮时间间隔的方法
10-25
主要介绍了javascript设置连续两次点击按钮时间间隔的方法,是非常实用的技巧,需要的朋友可以参考下
js js判断第几次点击/2次点击
m0_63538059的博客
03-28 3237
第一次写文章，可能有些地方写的不好 这篇文章可以供新手看看，大佬勿喷 开始: 在函数外定义一个变量 var aa=""; 当每次按钮点击时，便调用一次这个函数，函数内进行一个判断 if(aa==null){ //第一次 aa为空，所以进入这个判断，进入后给 aa进行赋值 aa="a" alert("第一次") aa="a" }else{ //第二次点击， 由于第一次点击 aa的值 就不为 null 了，所以进入,为了使下一次进入第一个 ，所以 要给 aa赋值为空...
js 设置按钮点击间隔时长（禁用有提示）
ImSanJin的博客
08-26 1046
思路： 将按钮指向其他提示语的function ，使用setTimeout设置时长，将按钮关联的方法改回来。 就个人而言，可能更偏向于使用遮罩的方式，不让用户用任何功能。 //导出按钮设置为不可导出 $('#exportSessionBnt').attr('onclick','cannotExport();'); setTimeout(function(){ ...
通过js实现button按钮间隔一分钟可点击
weixin_42048853的博客
12-11 2494
js限制按钮每隔一段时间才能再次点击 设置属性 disabled 可以限制交互，单击按钮时添加disabled=“disabled”属性，再为按钮添加定时器，一定时间后删除定时器和disabled属性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
js解决click事件点击事件间隔方法
weixin_30950237的博客
12-17 885
var myTimeout = null; $("#id").click(function(){ clearTimeout(myTimeout); myTimeout = setTimeout(function() { ... }, 5e3); }); 　　 转载于:https://www.cnblogs.com/imsomnus/...
点击间隔时间控制
Dota_wy的博客
10-19 1325
点击间隔时间控制为了避免在短时间内点击多次响应同一事件的工具类处理方法import android.view.View;/** * 防止按钮连续点击 * Created by ${Dota.Wang} on 2017/10/19. */ public class DoubleClickUtils { // 两次点击按钮之间的点击间隔不能少于1000毫秒 private stat
点击按钮后5s内不能再次点击该按钮
07-18
点击按钮后5s内不能再次点击该按钮
php 连续点击事件,javascript设置连续两次点击按钮时间间隔的方法_javascript技巧...
weixin_35793357的博客
03-28 525
本文实例讲述了javascript设置连续两次点击按钮时间间隔的方法，分享给大家供大家参考。具体实现方法如下：很多时候我们在实际应用中，可能并不希望按钮联系被不间断的点击，所以要限定一定的时间间隔才能够再次点击按钮，下面就通过代码实例介绍一下如何实现此功能，代码如下:http://www.jb51.net/" />脚本之家0以上代码实现了我们的要求，可以限制点击按钮的间隔时间，这一效果可以扩...
js自定义双击事件(可更改双击触发间隔，解决单击双击事件冲突)
qq_51567295的博客
12-29 1310
思路：设置一个计数器，用来记录点击的次数。 点击第一次：创建定时器，300毫秒后，执行单击操作，并将计数器归零 点击第二次：定时器还没有触发，删除定时器、执行双击操作，并将计数器归零
Windows如何区分鼠标双击和两次单击
Benbenzhou
11-25 6958
  在Windows平台上，鼠标左键的按下、松开、快速的两次点击会产生WM_LBUTTONDOWN、WM_LBUTTONUP和WM_LBUTTONDBLCLK消息，但是Windows根据什么来区分连续的两次鼠标按键操作，是两次独立的单击，还是一次双击呢？最近在解决一个问题时，通过使用Spy++和查阅MSDN，弄清楚了这个问题。简单总结如下：    Windows根据两个条件来做这个区分：（1）双击
javascript 设置点击按钮的时间间隔
yuemu26的专栏
08-24 3226
var times;     $('#btn_code').click(function(){         var _this = $(this);         times = 12 * 60;         _this.val(times + '秒可以重新发送');         var timer = setInterval(function(){
js控制按钮10s内只能点击一次
Real666的博客
08-10 2685
js控制按钮10s内只能点击一次
js 实现间隔相同时间自动触发两个按钮的点击事件，两个按钮触发事件时间间隔一样，然后循环
yijiupingfan0914的博客
07-25 2868
问题： function clickTuo() { $("#ffimg1").trigger("click"); }; function clickTuo2() { $("#ffimg2").trigger("click"); }; 就比如这两个鼠标点击事件，...
为按钮连续点击设置时间间隔
acMiner的博客
07-08 5781
防止按钮连续点击思路：写一个工具类，判断两次点击的时间间隔，如果两个点击的时间小于某个规定值，就不能相应该事件 代码如下 1.单个按钮 private static long lastClickTime; public static boolean isFastDoubleClick() { long time = System.currentTimeMillis();
前端多次点击button_js控制再次点击按钮之间的间隔时间可防止重复提交
weixin_42118701的博客
02-05 581
var wait = 60;function change() {$o = $("#J_refresh_checkcode");if(wait == 0) {$o.removeAttr("disabled");$o.html("看不清？换一张");wait = 60;} else {$o.attr("disabled", true);$o.attr("font-color", "gray");$o...
js 点击按钮的防抖
最新发布
09-14
### 回答1： 防抖 (debouncing) 是一种技术，旨在减少函数在短时间内被频繁调用的情况。 在 JavaScript 中，可以通过使用 setTimeout 函数来实现防抖。 例如，假设你有一个在点击按钮时调用的函数： ``` function handleClick() { console.log('Button clicked'); } document.querySelector('button').addEventListener('click', handleClick); ``` 要在点击按钮时实现防抖，可以这样改写代码： ``` function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, arguments), delay); }; } function handleClick() { console.log('Button clicked'); } document .querySelector('button') .addEventListener('click', debounce(handleClick, 1000)); ``` 在上面的代码中，我们使用了 debounce 函数来包装 handleClick 函数，并将 debounce 函数作为事件监听器的回调函数。这样，每当点击按钮时，都会清除 timer 并重新设置它，以延迟调用 handleClick 函数。如果在延迟期间再次点击按钮，则会再次清除 timer 并重新设置它，从而再次延迟调用 handleClick 函数。这样，就可以在点击按钮时实现防抖了。 ### 回答2： JavaScript的防抖是一种技术，用于限制连续的重复操作。当用户点击一个按钮或执行某个操作时，防抖可以确保在一定时间内只执行一次操作。 实现防抖的基本思路是利用定时器和事件监听。当按钮被点击时，首先清除之前设置的定时器。然后再设置一个新的定时器，在指定的时间间隔内，如果用户再次点击按钮，定时器会被清除并重新设置。只有当用户在指定时间间隔内没有再次点击时，定时器才会触发执行操作。 下面是一个基本的使用示例： ```javascript let timer; function debounce(func, delay) { clearTimeout(timer); timer = setTimeout(func, delay); } function handleClick() { console.log('按钮被点击了'); } const button = document.querySelector('button'); button.addEventListener('click', function() { debounce(handleClick, 300); }); ``` 在上述代码中，`debounce`函数接受两个参数：要执行的函数和延迟时间。在按钮点击事件监听中，使用`debounce`函数来包装点击处理函数`handleClick`，设置延迟时间为300毫秒。当按钮被点击时，`debounce`函数会将`handleClick`函数作为参数传递给`setTimeout`，延迟300毫秒后执行。 这样设计防抖可以有效避免频繁的重复点击，例如在连续点击按钮时，只会触发最后一次点击的操作。从而提高代码执行效率和用户体验。 ### 回答3： 点击按钮的防抖是指在用户连续点击按钮时，为了避免频繁触发事件造成不必要的资源浪费，可以通过一定的延迟时间来对点击事件进行控制。 在JavaScript中，我们可以通过以下方法实现点击按钮的防抖： 1. 首先，我们需要定义一个延迟时间，例如300毫秒，用于控制事件触发的间隔。 2. 创建一个变量用于保存定时器的返回值，初始化为null。 3. 监听按钮的点击事件，每次点击事件触发时，先清除之前的定时器。 4. 启动一个新的定时器，延迟指定的时间后执行特定的操作。 5. 在定时器中执行需要进行防抖的操作，例如发送请求、更新页面等。 通过上述步骤，我们可以实现简单的点击按钮防抖。代码示例如下： ```javascript let timer = null; // 定义定时器变量 // 监听按钮的点击事件 document.getElementById('button').addEventListener('click', function() { clearTimeout(timer); // 清除之前的定时器 timer = setTimeout(function() { // 执行需要进行防抖的操作 console.log('Button clicked!'); // 在这里可以添加具体的逻辑 }, 300); // 设置延迟时间为300毫秒 }); ``` 以上代码通过设置延迟时间来控制按钮点击事件的触发间隔，从而实现了点击按钮的防抖效果。在用户频繁点击按钮时，只有最后一次点击会触发事件，避免了资源的浪费。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值