Vueの最新の振れ防止案
6588 ワード
関数ジッタ防止(debounce):イベントがトリガーされ続けると、一定期間にイベントがトリガーされず、イベント処理関数が一度実行され、設定された時間が来る前にイベントがトリガーされると、遅延が再開されます.栗を挙げると、scrollイベントがトリガーされ続けるとhandle関数は実行されず、1000ミリ秒以内にscrollイベントがトリガーされない場合、scrollイベントがトリガーされるのが遅延します.
関数スロットル(throttle):イベントが継続的にトリガーされると、一定期間に1回のイベント処理関数のみが呼び出されることを保証します.节节の通俗的な解釈は例えば私达の蛇口が水を放すと、バルブが开くと、水がざあざあと流れて、勤勉倹约の优良な伝统の美徳を持って、私达は蛇口を小さく闭じて、できるだけ私达の気持ちが一定の规则に従ってある时间の间隔の中で1滴1滴垂らします.栗を挙げると、scrollイベントがトリガーされ続けると、handle関数はすぐに実行されず、1000ミリ秒おきにhandle関数が実行されます.
手ブレ防止の例:
スロットルの例:
関数スロットル(throttle):イベントが継続的にトリガーされると、一定期間に1回のイベント処理関数のみが呼び出されることを保証します.节节の通俗的な解釈は例えば私达の蛇口が水を放すと、バルブが开くと、水がざあざあと流れて、勤勉倹约の优良な伝统の美徳を持って、私达は蛇口を小さく闭じて、できるだけ私达の気持ちが一定の规则に従ってある时间の间隔の中で1滴1滴垂らします.栗を挙げると、scrollイベントがトリガーされ続けると、handle関数はすぐに実行されず、1000ミリ秒おきにhandle関数が実行されます.
手ブレ防止の例:
<script>
const delay = (function () {
let timer = 0
return function (callback, ms) {
clearTimeout(timer)
timer = setTimeout(callback, ms)
}
})()
export default {
methods:{
fn() {
delay(() => {
//
}, 500)
}
}
}
</script>
スロットルの例:
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));