2021-02-02 17:41发布
1、函数防抖
函数防抖就是我们在一段时间内频繁触发同一个事件,可能会十分的影响性能。想要在一段时间内只触发一次。这就要用到防抖和节流。举个例子,防抖是频繁触发后,1s内没有再触发时才调用事件处理程序。
function debounce(callback, time) {
var timer;
//使用闭包,可以避免污染全局变量
return function () {
clearTimeout(timer) //清除计时器
//重新开始计时
var args = arguments
timer = setTimeout(() => {
callback.apply(null, args)
}, time);
}
//测试案例
var handle = debounce(function (a, b) {
console.log(a, b)
}, 1000)
[removed] = function () {
handle(1, 2)
2、函数节流
和防抖相对应的就是节流了,节流就是在一段时间内只触发一次!
function throttle(callback, time, immediately) {
if (immediately) {//是否立即执行一次
var t;
//之前没有计时 或 距离上次执行的时间已超过规定的值
if (!t || Date.now() - t >= time) {
callback.apply(null, arguments)
//得到的当前时间戳
t = Date.now()
} else {//如果不立即执行一次,那么这个时间让他延迟多长时间后再执行
if (timer) return
timer = null
最多设置5个标签!
1、函数防抖
函数防抖就是我们在一段时间内频繁触发同一个事件,可能会十分的影响性能。想要在一段时间内只触发一次。这就要用到防抖和节流。举个例子,防抖是频繁触发后,1s内没有再触发时才调用事件处理程序。
function debounce(callback, time) {
var timer;
//使用闭包,可以避免污染全局变量
return function () {
clearTimeout(timer) //清除计时器
//重新开始计时
var args = arguments
timer = setTimeout(() => {
callback.apply(null, args)
}, time);
}
}
//测试案例
var handle = debounce(function (a, b) {
console.log(a, b)
}, 1000)
[removed] = function () {
handle(1, 2)
}
2、函数节流
和防抖相对应的就是节流了,节流就是在一段时间内只触发一次!
function throttle(callback, time, immediately) {
if (immediately) {//是否立即执行一次
var t;
return function () {
//之前没有计时 或 距离上次执行的时间已超过规定的值
if (!t || Date.now() - t >= time) {
callback.apply(null, arguments)
//得到的当前时间戳
t = Date.now()
}
}
} else {//如果不立即执行一次,那么这个时间让他延迟多长时间后再执行
var timer;
return function () {
if (timer) return
var args = arguments
timer = setTimeout(() => {
callback.apply(null, args)
timer = null
}, time);
}
}
}
一周热门 更多>