js防抖节流 点击提交操作,禁用提交按钮，5s后才可以继续点击

于 2024-01-25 17:38:19 发布
阅读量419 收藏 8
点赞数 8
分类专栏： react+js 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43665443/article/details/135849982
版权

直接上代码，写一个延时器

export const CloseLoading = (setLoading: any) => {
  setLoading(true);
  // 创建一个计数器
  let count = 0;
  const timerId = setInterval(() => {
    count++;
    if (count === 5) {
      clearInterval(timerId); // 清除定时器
      setLoading(false);
    }
  }, 1000);
};
柳絮泡泡
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试题知识点总结（仅供参考）
jiang16608544720的博客
03-14 1728
以下是本人面试后总结出来的面试知识点： 1.1. 模块化 \1. ES6 \2. Commonjs 1.2. 构建工具 \1. Webpack核心思想：模块化打包 \2. Webpack基本配置: entry, output, module&rules, plugins, devServer, devtool, resolve \3. 打包各种资源: JS / CSS/img/html/… \4. 加分项: 自定义webpack打包环境, Webpa
2022前端笔记
马航机长的博客
06-24 2113
tip：只记录本人记得不牢固的，或者有启发的点，新手建议多看书 1、原型链 实例对象的constructor也会指向构造函数 因为没有constructor属性会通过原型链找（容易忽略，是个小陷阱） function Person() {} var person = new Person(); console.log(person.constructor === Person); // true __proto__ 来自于 Object.prototype,更像是一个 getter/setter，使用 o
JavaScript防抖功能（js防抖函数，防抖功能的应用与解析，手把手教学）
weixin_65793170的博客
04-04 1万+
防抖就是某一高频事件不断被触发时，仅在最后一次真正执行事件处理代码，将多次执行变为最后一次执行，具体点就是我们在触发高频事件后，n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。其实，防抖和节流都是防止函数多次调用。
js中的防抖和节流
rain19982016的博客
03-10 1432
js中的防抖和节流
JS防抖节流（详细）
博客简介
06-13 1869
js防抖节流的详细介绍
js禁止点击按钮（点击无效）
weixin_44944193的博客
11-07 1万+
1.设置按钮不可点击 document.getElementById("bt1").disabled=true; 2.设置按钮可点击 document.getElementById("bt1").disabled=false; 3.jquery中设置按钮可点击与不可点击，默认是可点击的 (1)设置按钮不可点击 $("#bt1").attr("disabled",true); ...
js-5s后 重新发送短信（定时器，清除定时器）
xiaowei的博客
11-25 2254
5s后 重新发送短信<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js-手机发送短信倒计时</title> <style> button{ width: 100px; height: 30px;
js 阻止实际的表单提交
不想内卷的博客
05-20 407
所以为了避免点击form表单以后出现这样的问题，我们需要的是避免触发form表单传值。很多时候我们点击form提交成功后，页面会自动刷新，1.不用form传值，但是缺点是不能用于文件上传。4.按钮不要加上type=“submit”3.在方法加上这句阻止实际的表单提交。2.在form表单的头加上特殊符号。这样就不会触发submit方法了。
JS阻止form表单提交
weixin_30423977的博客
01-22 517
当做登陆页面时，JS判断用户名密码为空时需要阻止form表单提交。 <script type="text/javascript"> var a = true; function validate(){ var username = document.getElementById("username").value; var ...
JS中onsubmit禁止提交表单的三种方式
qq_30359369的博客
08-14 1597
JS中onsubmit禁止提交表单的三种方式 前面我在博客中写过onblur实现失焦调用函数的三种方式, onsubmit也几乎一模一样, 不过昨天我在写一个表单提交页面,判断某些必填项未填写则禁止提交, 我们知道onsubmit是否提交取决于它的值,true则提交,false则禁止提交; 当在调用判断函数时返回值为false却也提交了…于是我查了资料,并把JS触发事件研究了一下,总结如下: 第一...
提交以后禁用按钮一段时间，防止重复提交
最新发布
02-21
提交以后禁用按钮一段时间，防止重复提交 使用 v-noMoreClick
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
10-16
今天小编就为大家分享一篇在vue中使用防抖和节流,防止重复点击或重复上拉加载实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
10-14
主要介绍了js节流防抖应用场景,以及在vue中节流防抖的具体实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JS函数节流和防抖之间的区分和实现详解
10-17
本文主要介绍的是关于JS中比较常用的函数：节流函数和防抖函数，从概念、使用场景到代码简单实现做了一个详细的区分。感兴趣的小伙伴们可以参考一下
JS防抖和节流实例解析
10-16
主要介绍了JS防抖和节流实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JavaScript进阶
m0_65552590的博客
08-02 163
JS高级用法
前端解决按钮重复提交数据问题（节流和防抖）
热门推荐
stc_ljc的博客
06-14 12万+
当我们在页面进行点点点的操作时，很可能遇到点击两次的行为，这时候提交或保存按钮也没有进行校验，很可能保存两份数据，因此，作为开发人员，对需要保存类似的按钮进行校验很有必要。
JS 逐步解析防抖及实现
z593721的博客
04-10 2631
JS防抖其实也是用来提升网页性能的一种技术写法 防抖就是指当用户触发某个操作时，如果在指定的时间内再次触发该操作，那么就清除前面触发的操作，直到用户操作之后并且在指定的时间内不再操作我们再处理用户的请求。 比如说：点击按钮执行搜索操作的时候，如果用户一秒内重复点击按钮，这个时候由于重复提交，页面就会变卡。 1.第一步：先把按钮的点击事件绑定上去。点击按钮控制台会数据 ‘11111’，这个时候重复点击按钮还是会重复调用按钮的点击事件。 html部分 <button type="button" i
禁止button提交表单， 但是不禁止js提交
滴水石穿
06-28 3022
button有个type属性，属性值可为button、submit、reset button=普通按钮，直接点击不会提交表单 submit=提交按钮，点击后会提交表单 reset=表单复位 当button的type属性值为button时，仅做为一个普通的按钮，并不会提交该表单，此时你可以通过js脚本来提交，而form中不需要加onsubmit事件。 ...
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、付费专栏及课程。

余额充值