防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案
debounce,去抖动。策略是当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作。 这是debounce的基本思想,在后期又扩展了前缘debounce,即执行动作在前,然后设定周期,周期内有事件被触发,不执行动作,且周期重新设定。
debounce的特点是当事件快速连续不断触发时,动作只会执行一次。 延迟debounce,是在周期结束时执行。但当触发有间断,且间断大于我们设定的时间间隔时,动作就会有多次执行。
防抖:<div id="common"></div>
<div id="special"></div>
<script>
var delay = 300;
var common = document.getElementById('common') // 获取页面的左边
var special = document.getElementById('special') // 获取页面的右边
// 这是执行debounce的。
window.onresize = function () {
debounce(addlist, delay) //这一个设置
commonWay() // 这个是普通的函数执行
}
function debounce(fn, delay) { // 定义一个debounce函数
clearTimeout(fn.timeid)
fn.timeid = setTimeout(function () {
fn()
}, delay)
}
function addlist() { // 监听事件的响应事件,执行dom操作。
special.innerHTML += '<li>k</li>'
}
function commonWay() { // 这是执行了普通的函数
common.innerHTML += '<li>k</li>'
}
</script>
throttle节流:节流与抖动不一样,节流是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。拿onscroll事件来说,如果使用的是抖动的话,只用当滚动停止后才会执行回调函数,在滚动的过程是不会执行的。节流不同,滚动的时候每隔一个时间周期就会执行一次回调,然后进入下一个新周期
* 原理:节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。
节流:<div id="common">
throttle
</div>
<div id="special">
debounce
</div>
<script>
var delay = 300;
var common = document.getElementById('common') // 获取页面的左边
var special = document.getElementById('special') // 获取页面的右边
function addlist() { // 监听事件的响应事件,执行dom操作。
special.innerHTML += '<li>k</li>'
}
function commonWay() { // 这是执行了普通的函数
common.innerHTML += '<li>k</li>'
}
// 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)
}
}
function debounce(fn, delay) { // 定义一个debounce函数
clearTimeout(fn.timeid)
fn.timeid = setTimeout(function () {
fn()
}, delay)
}
window.addEventListener('resize', function () {
throttle(commonWay, 1000);
debounce(addlist, delay);
})
</script>