函数防抖、函数节流

news/2024/7/19 14:36:43 标签: js

             // 时间戳实现返回节流函数的工具函数
                function timeStampThrottle(callback, delay = 1000) {
                    let pre = 0; //设置初始时间为0
                    console.log("pre先前的时间:", pre);
                    return function(event) {
                        const current = Date.now();
                        if (current - pre > delay) { //离上次调用callback防抖目标方法的时间大于delay方再次调用;
                            callback.call(this, event);
                            // 记录当下调用的时间
                            pre = current;
                        }
                    }
                };

    // 定时器实现返回节流函数的工具函数(setInterval)


                function timeIntervalThrottle(callback, delay = 1000) {
                    let pre1 = 0;
                    return function(event) {
                        if (pre1 == 0) {
                            pre1 += 1000;   
                            callback.call(this, event);
                            //定时器每隔1秒执行一次,会有一秒的空白时间此时pre1为0,故点击时会调用点击事件,点击过立即设置pre1不等0
                            // 设置的延时时间,需比真实的大1000毫秒
                            const timer = setInterval(() => {
                                pre1 += 1000;
                                // console.log("setInterval的定时器:", pre1);
                                // console.log("pre的变换;", pre,delay)
                                if (pre1 == delay) {
                                    clearInterval(timer);
                                    pre1 = 0;
                                }
                            }, 1000)
                        }else{
                            console.log("请勿频繁点击!")
                        }

                    }
                }

  //执行的函数

        function handleClick() {
                    console.log("执行了函数", this, event);
                };


http://www.niftyadmin.cn/n/1866236.html

相关文章

190402-通过例子理解LSTM中的数据格式

LSTM Keras API predicting multiple outputsLSTM Keras API predicting multiple outputs 在回归问题中的Keras-LSTM 在监督学习中的样本需要是以下3D格式:reshape input to be 3D [samples, timesteps, features]准备数据 对于下面数据,样本个数m10&…

解决element input 在部分浏览器会自动填充密码的问题

尝试了 autocomplete“off” autocomplete“new-password” 在input之前再写一个input 隐藏起来 效果不佳。 解决办法:重点是只读属性的设置 姓名栏设置属性: id"maintenanceUsername" autocomplete"off" focus"removeOn…

electron+vue客户端,设置badge的点击事件无效

原因是:页面设置窗口拖动:CSS的 -webkit-app-region: drag,导致部分点击事件无效 解决方案:需要点击的元素设置取消拖动,添加CSS :-webkit-app-region: no-drag

190410-4步利用EndNote批量下载参考文献及施引文献

参考文献如何利用EndNote批量下载文章 Step1: 登陆Web of Science官网 https://apps.webofknowledge.com Step2: 搜索需要检索的文章并点击进入 Step3: 批量下载参考文献 下滑到最后,查看参考文献,点击在 "引用的参考文献" 页面中查看全部…

弹性布局自动换行内容平分父盒子剩余高度问题

弹性布局设置子盒子自动换行展示,并且子盒子不撑满父盒子时,不会平分父盒子剩下的高度(align-content: flex-start)。 display: flex; flex-wrap: wrap; align-content: flex-start

滚动条出现时影响布局问题

放置滚动内容的盒子设置固定宽度, 其父盒子的 宽度设置滚动内容宽度20px(可调整)、固定高度和overflow-x:hidden,overflow-y:scroll; 此法是单独设置 父盒子一定宽度展示滚动条,滚动条区域和展示内容盒子分开设置。并且滚动条会成…

190412-矩阵每行元素除以同一个数

matlab矩阵中每一行数除以一个数 思路:将向量转变成矩阵,然后利用矩阵作除法 代码 p1 reshape(linspace(1,9,9),3,3) p2 p1 r1 p1 .*p2 r2 repmat(sum(r1,2),[1 3]) r3 r1./r2结果 p1 1 4 72 5 83 6 9p2 1 4 72 …