js节流函数和js防止重复提交的N种方法
应用情景
经典使用情景:js的一些事件,比如:onresize、scroll、mousemove、mousehover等;
还比如:手抖、手误、服务器没有响应之前的重复点击;
这些都是没有意义的,重复的无效的操作,设置对整个系统的影响还可能是致命的,所以我们要对重复点击的事件进行相应的处理!
节流函数
所谓的节流函数顾名思义,就是某个时刻限制函数的重复调用。
同样节流函数也是为了解决函数重复提交的问题,而防止重复提交的方法,不止节流函数一种实现。
方法汇总
本文整理了我在工作实践当中,觉的防止js重复提交,比较好用的方法,在这里和大家分享一下。
一、setTimeout + clearTimeout(节流函数)
本文提供两种实现方式:普通节流函数和闭包节流函数
二、设定flag/js加锁
三、通过disable
四、添加浮层比如loading图层防止多次点击
具体实现
一、setTimeout + clearTimeout(节流函数)
方式一:闭包节流函数(可传递多个参数)
/** * 闭包节流函数方法(可传参数) * @param Function fn 延时调用函数 * @param Number delay 延迟多长时间 * @return Function 延迟执行的方法 */ var throttle = function (fn, delay) { var timer = null; return function () { var args = arguments; //参数集合 clearTimeout(timer); timer = setTimeout(function () { fn.apply(this, args); }, delay); } } /** * 要执行的方法 * @param String name 传递的参数 */ function postFun(name) { document.writeln("名字:" + name); } //================测试部分 => 【1s重复点击10次】 var t = throttle(postFun, 1000); var ejector = setInterval(() => { t("tiger"); }, 100); setTimeout(() => { clearInterval(ejector); }, 1000);
执行结果:
方式二:普通节流函数方法
/** * 普通节流函数方法 * @param Function fn 延时调用函数 * @param Number delay 延迟多长时间 */ function throttle(fn, delay) { if (fn._id) { clearTimeout(fn._id); } fn._id = window.setTimeout(() => { fn(); fn._id = null; }, delay); } /** * 要执行的方法 */ function postFun() { document.writeln(new Date().getTime()); } //================测试部分 => 【1s重复点击10次】 var interval = setInterval(() => { throttle(postFun, 1000); }, 100); setTimeout(() => { clearInterval(interval); }, 1000);
执行结果:
二、设定flag/js加锁
var lock = false; jQuery("#submit").on('click', function () { if (lock) { return false; }
lock = true; jQuery.post(url, data, function (response) { //TODO:业务代码 lock = false; }); });
总结
前两种方式实现起来比较方便,而后两种实现起来相对比较繁琐,如果是为了防止事件的多次触发,建议使用闭包,如果是表单提交,适度使用后两种比较稳妥。
关注下面二维码,订阅更多精彩内容。

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验