js函数的节流和防抖
用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕
resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repaint)这会严重耗费浏览器性能,造成页面
卡顿。
举几个例子:比如说我们在滚动事件中要做一个复杂的计算,或者做一个按钮的防二次点击操作的需求,这些需求都会在频繁的事件
回调中做复杂计算,很有可能导致页面卡顿,这时候我们可以将多次计算合并为一次计算,只在一个精确点做操作。这些事可以利用
函数的防抖来实现
函数的防抖,就是可以让这个函数每次触发的时间间隔小于wait,防抖的情况下就是假设用户一直触发我这个函数,这个函数只会调用一次,也就是在最后一次来进行调用,下面是一个简单的防抖函数代码实现
//func是你要绑定防抖操作的函数,wait是你想要这个函数多少ms之内不能连续触发,也就是假如你设置了100ms后触发,那这个函数在100ms之内如果又执行了就不会触发,直到超过100ms后这个函数才会执行
function debounce(func, wait) {
// 定时器变量
var timer
return function() {
// 每次触发绑定的函数之前先清除定时器
clearTimeout(timer)
// 指定 xx ms 后触发
timer = setTimeout(func, wait)
}
}
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
console.log("success ")
}
// 采用防抖动
window.addEventListener(‘scroll‘,debounce(realFunc,500))
假如说有现在这样一个需求,我们需要在滚动的时候实时的console.log(0),你懂得,在一次滚动过程中函数的执行频率特别快
,如果这个函数有更为复杂的方法,比如操作dom或者其他交互,会严重影响性能。这个时候我们就需要做一个节流的操作来减
少这个函数的调用频率
函数节流,就是将多次执行变成每隔一段固定的时间执行一次,会大大提高性能,比如我们可以设置一个高频率事件每隔100ms执行一次,这样性能就会得到很大的优化,下面是一个简单的节流函数的代码实现
//mustRunTime就是你想要设置的多少ms执行一次
function throttle(func, wait, mustRunTime) {
var timer,
startTime = new Date();
return function() {
var _this = this,
args = arguments,
curTime = new Date();
clearTimeout(timer);
// 如果达到了规定的触发时间间隔,就触发这个func
if(curTime - startTime >= mustRunTime){
func.apply(_this,args);
startTime = curTime;
// 没达到触发间隔,重新设定定时器
}else{
timer = setTimeout(func, wait);
}
};
};
function realFunc(){
console.log("success");
}
// 采用了节流函数
window.addEventListener(‘scroll‘,throttle(realFunc,500,1000));
以上是本人对js函数节流和防抖的一些理解,希望对你能有所帮助~~~
原文地址:https://www.cnblogs.com/bai1218/p/9986934.html
时间: 2024-10-12 19:22:19