debounce防抖:
当事件快速连续不断触发时,动作只会执行一次
window.onresize = function () {
debounce(addlist, delay) //这一个设置了节流
console.log(1) // 这个是普通的函数执行
}
function debounce(fn, delay) { // 定义一个debounce函数
clearTimeout(fn.timeid)
fn.timeid = setTimeout(function () {
fn()
}, delay)
}
throttle节流:
原理:不管事件触发有多频繁,在规定时间内一定会执行一次真正的事件处理函数。
var delay = 300;
function commonWay() { // 这是执行了普通的函数
console.log(1);
}
// tottle的实现,也就是节流的实现,就是设置了一个一开始函数运行的时间戳进行执行
var startTime, timestamp, timer;
function throttle(fn, delay) {
timestamp = +new Date() // 先设置开始的时间
clearTimeout(timer)
if (!startTime) {
startTime = timestamp
}
if (timestamp - startTime >= delay) {
fn()
startTime = timestamp
} else {
timer = setTimeout(function () {
fn()
}, delay)
}
}
window.addEventListener('resize', function () {
throttle(commonWay, 2000);
})
网友评论