前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >javascript 防止重复点击

javascript 防止重复点击

作者头像
IT架构圈
发布于 2018-05-31 07:59:12
发布于 2018-05-31 07:59:12
1.7K00
代码可运行
举报
文章被收录于专栏:IT架构圈IT架构圈
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    var debounce = function (func, wait, lossless) {
        var lastTimeout, alreadyDo = false;
        if (typeof lossless == 'undefined')
            lossless = true;
        return function () {
            var context = this,
                  args = arguments;
            if (!alreadyDo) {
                alreadyDo = true;
                setTimeout(function () { alreadyDo = false }, wait);
                clearTimeout(lastTimeout);
                func.apply(context, args);
            } else if (lossless) {
                clearTimeout(lastTimeout);
                lastTimeout = setTimeout(function () {
                    func.apply(context, args);
                }, wait);
            }
        };
    }

///防抖函数 ///防止事件函数高频执行,间隔wait毫秒执行 ///lossless是否保存最后一次未到间隔时间的执行

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-03-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程坑太多 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
浅聊防抖与节流 实现与应用
https://github.com/mqyqingfeng/Blog/issues/26
程序员海军
2021/10/11
3270
浅聊防抖与节流 实现与应用
几个会被面试问到的JS基础实现代码
记录工作和学习中的一些可能会被面试问到的JS内部实现基础,由于笔者水平有限,提供出的答案不一定准确,但是原理尽可能会讲清楚,以后会进行逐步添加。 bind实现 bind实现其实是内部调用apply或者call来实现对象的this绑定,具体实现可以参考如下: var o = { a: 1, b: 2, print: function() { console.log(this.a); console.log(arguments); } }; va
糊糊糊糊糊了
2018/05/09
8791
每日两题 T3
遍历数组的同时,将元素放入数组,然后取出数组中间元素,但是会有内存额外开销,时间复杂度
合一大师
2020/07/17
3280
JavaScript - 函数防抖与节流
防抖:在任务频发的情况下,在任务触发的间隔超过设定的间隔的时候,任务才会执行,即被调用的函数在一次连续的高频操作中只被调用一次。
长风过境
2020/12/08
4250
JavaScript - 函数防抖与节流
JS魔法堂:函数节流(throttle)与函数去抖(debounce)
一、前言                                     以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。   1. window对象的resize、scroll事件   2. 拖拽时的mousemove事件   3. 射击游戏中的mousedown、keydown事件   4. 文字输入、自动完成的keyup事件   实际上对于window的resize事件,实际需求大多为停止改变大小n毫秒后执行后续处理;而其他事件大多的需求是
^_^肥仔John
2018/01/18
2.2K0
老生常谈的函数防抖与节流
https://github.com/ZengLingYong/Blog/issues/21
前端迷
2019/09/25
6820
JavaScript 中的防抖和节流
函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。如下图,持续触发 scroll 事件时,并不执行 handle 函数,当 1000 毫秒内没有触发 scroll 事件时,才会延时触发 scroll 事件。
骤雨重山
2022/01/17
8540
JavaScript 中的防抖和节流
浅聊函数防抖与节流
https://github.com/mqyqingfeng/Blog/issues/26
程序员海军
2021/07/19
3580
daily-question-02(前端每日一题02)
在这里记录着每天自己遇到的一道印象深刻的前端问题,以及一道生活中随处可见的小问题。
小皮咖
2019/11/05
4810
15个项目中会常用到的 JS 工具函数代码
同时适用于word,ppt等浏览器不会默认执行预览的文档,也可以用于下载后端接口返回的流数据,见3
前端达人
2021/09/09
6330
js实现函数防抖与节流
节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
蓓蕾心晴
2020/05/25
1.4K0
跟着underscore学防抖
window 的 resize、scroll mousedown、mousemove keyup、keydown ……
IT人一直在路上
2019/09/18
3470
工作中常用的javascript常识
JS 中分为七种内置类型,七种内置类型又分为两大类型:基本类型和对象(Object)。
前端迷
2019/12/05
5340
工作中常用的javascript常识
彻底理清防抖(Debounce)和节流(Throttle)
前端有很多性能优化的方式,面对用户与网页的频繁交互,如输入框打字、按钮点击、滚动事件等,我们如何确保应用的响应既迅速又高效?
用户4396583
2024/09/30
4290
函数去抖(debounce)& 函数节流(throttle)总结
让某个函数在一定 事件间隔条件(去抖debounce) 或 时间间隔条件(节流throttle) 下才会去执行,避免快速多次执行函数(操作DOM,加载资源等等)给内存带来大量的消耗从而一定程度上降低性能问题。
全栈程序员站长
2022/09/06
3K0
函数去抖(debounce)& 函数节流(throttle)总结
最近面试经常被问到的js手写题
防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行
helloworld1024
2022/11/08
5340
无敌秘籍之 — JavaScript手写代码
用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。
小生方勤
2019/07/15
4260
无敌秘籍之 — JavaScript手写代码
JavaScript中的函数防抖与函数节流
函数防抖(debounce)当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。
刘亦枫
2020/03/19
5960
防抖与节流
也就是说给定了一个时间n,如果在n毫秒内重复执行某个函数那么将不会执行,如果n毫秒内不再触发这个函数,那么将执行该函数。表现的效果是如果一直触发函数,那么只有最后一次才会执行。
kai666666
2020/10/19
4050
阿里前端高频面试题合集
做完这道题目,我们就需要格外注意,每个定时器的时间,并不是所有定时器的时间都为0哦。
helloworld1024
2022/09/13
4280
相关推荐
浅聊防抖与节流 实现与应用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验