JavaScript 节流函数封装

上一篇写了防抖,现在来写一下节流,节流函数是在一段时间内多次触发某个事件,但是在这一段时间内只执行一次,下面我们来实现一个按钮在 N 秒之内点击多次,但是却执行一次,话不多说,上代码.

// 首先,我们在 html 里面 写一个按钮
<button id="button">点我点我快点我</button>

和防抖一样,还是使用 setTimeout 来实现,按钮点击,创建延时,但是在延迟没有执行的情况下,我们不能再次创建延迟

let button = document.querySelector("#button")
button.addEventListener("click",()=>{thro()
})
let timer=null;
function thro(){if(timer) returntimer=setTimeout(()=>{console.log('哈哈哈哈,我被点击了');// 将 timer 重新赋值为 null,因为我们在上面根据 timer 做判断,是否进行下面的逻辑,如果不重新初始化 timer 的值,那么 timer 将一直为 true ,我们这个方法执行一次也就不会再执行了timer=null},1000)
}

上面这个方法应对这个业务逻辑是没有问题的,但是如果我们想要方法变得更通用一些,为了以后我们能够拿来即用,需要进行一下封装,提高复用性,下面我们来封装一下.这里会使用到闭包,因为我们需要 timer 是一直在内存当中的,如果还像上面那样放在全局,封装的函数就没有太大的意义
方案1:

let button = document.querySelector("#button")
let throFunc = thro((value) => {console.log("value", value);}, 1000);
button.addEventListener("click",()=>{thro('哈哈哈,我被点击了')
})
function thro(callback,delay){let timer=null;// 此处的 value,我们可以在调用的时候传给回调函数  callback return function(value){if(timer) returntimer=setTimeout(()=>{callback(value)timer=null},delay)}
}

方案2:

let button = document.querySelector("#button")
let throFunc = thro(1000);
button.addEventListener("click",()=>{thro(()=>{console.log('哈哈哈哈,我被点击了')})
})function thro(delay){let timer=null;return function(callback){if(timer) return;timer = setTimeout(()=>{callback();timer=null},delay)}
}

方案3,使用时间戳

let button = document.querySelector("#button")
let throFunc = thro(1000);
button.addEventListener("click",()=>{thro(()=>{console.log('哈哈哈哈,我被点击了')})
})
// 这个方法和上面俩不同的是第一次点击会被触发
funtion thro(delay){let time=null;return function(callback){let currentTime = new Date().getTime();if(currentTime-time>=delay){callback();time=new Date().getTime();}}
}

JavaScript 节流函数封装相关推荐

javascript深拷贝函数封装
在javascript,python这种带引用类型的高级程序设计语言中,很容易出现浅拷贝而导致错误. 本篇文章,我浅述一下我对js中深拷贝函数封装的思考. 思路很简单,封装一个递归函数,终止条件是'不 ...
JavaScript节流函数, 防止大量函数触发解决办法
理由有时候开发者会需要注册一些回调函数在浏览器的scroll和resize事件上, 但是scroll和resize这类事件触发非常频繁, 而实际用户并不需要感知这么多的事件产生, 造成大量函数触发, ...
JavaScript 节流函数 Throttle 详解
在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动 (mousemove).也就是说用户在触发这些 ...
javascript动画函数封装（升级版）
//把任意对象的任意数值属性改变为任意的目标值function animate(obj, json, fn) {clearInterval(obj.timer);obj.timer = se ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
Javascript防抖函数节流函数的介绍(最详细)、彻底搞懂防抖节流的区别以及使用第三方库的防抖节流函数
文章目录 1.防抖节流函数介绍 1.1 认识防抖节流函数 1.2 认识防抖函数 1.3 防抖函数应用 1.4 认识节流函数 1.5 节流函数应用 1.6 生活中的例子 2.Underscore库 2. ...
JavaScript函数封装，js对象
1.函数:是封装了一段可以被重复执行调用的一次声明,多次调用,封装就是打包一:声明函数(1)function 声明函数的关键字,全部小写 (2)函数是做某件事情,函数名一般是动词 getSum ( ...
vue防抖注册全局_vue防抖节流函数---组件封装,防止按钮多次点击
/** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} isDebounce [1,3]为 ...

JavaScript 节流函数封装

JavaScript 节流函数封装相关推荐

最新文章

热门文章