Em primeiro lugar, o throttling e o anti-shake são usados para acionar eventos continuamente , como o evento onscroll. Se você não definir o throttling e o anti-shake, ao vincular o evento onscroll e definir a função de processamento do evento, você executará mais de n ao deslizar a roda de rolagem. A segunda função de processamento de eventos causa perda de desempenho. O throttling e o anti-shake às vezes são aplicados ao evento keydown de entrada. Escolha o throttling ou o anti-shake de acordo com a situação específica.
Deixe-me explicar brevemente os conceitos de estrangulamento e anti-vibração.
-
Limitação : quando você continua disparando um evento, execute o código que deseja executar em intervalos regulares. (Para evitar o acionamento frequente de eventos e executar o código n vezes)
-
Anti-shake : A função de processamento do evento é executada apenas quando o evento não é disparado em um intervalo de tempo fixo após o evento disparador ser interrompido. ( Ou seja, quando você continua a disparar um evento, apenas o último código é executado )
(Se o evento for disparado novamente dentro de um intervalo de tempo fixo, o tempo será recalculado.) -
Código de estrangulamento
var flag = true //节流阀默认为true
window.onscroll = function () {
//触发事件后代码执行第一次
if (flag === false) return // 节流阀闭合则不执行
flag = false // 来到这里即开关打开状态,现在关掉开关以免重复执行
console.log('执行一次')
setTimeout(() => {
//为防止频繁触发,用延迟器来设置时间间隔
flag = true //0.5秒后打开开关
}, 500) //若事件被极频繁触发,也能保证至少等待0.5秒再执行下一次
//的事件处理函数
}
- Código anti-vibração
var timer = null //准备一个timer变量来操作定时器
window.onscroll = function () {
clearInterval(timer) //触发事件就清除掉已有定时器
//保证了一定时间间隔内只执行一次事件处理函数
//而这个时间间隔就是下边延时器的500ms
timer = setTimeout(() => {
//设置延时器
console.log('触发')
}, 500) //0.5秒内不触发该事件,则执行一次延时器内代码
}