Простое для понимания понимание функций дросселирования и защиты от сотрясений

опрос
Простое для понимания понимание функций дросселирования и защиты от сотрясений

На собеседованиях часто спрашивают о троттлинге и анти-шейке, и их легко спутать, здесь мы запишем реализацию функций троттлинга и анти-шейка.

1. Дросселирование

Он выполняется только один раз в начале, а игнор срабатывает в процессе невыполнения завершения, ядро ​​заключается в开关锁🔒.

Например:多次点击按钮представить форму,第一次有效

// 节流
function throttle(fn, delay) {
    var timer = null;
    return function () {
        if (timer) { return false;}
        var that = this;
        var args = arguments;
        fn.apply(that, args);
        timer = setTimeout(function () {
            clearTimeout(timer);
            timer = null;
        }, delay || 500);
    };
}


// 使用
function clickHandler() {
    console.log('节流click!');
}
const handler = throttle(clickHandler);
document.getElementById('button').addEventListener('click', handler);

2. Защита от сотрясений

Выполнять только последнюю запущенную асинхронную задачу и очищать предыдущую асинхронную задачу.清零.

Например:页面滚动Обработайте событие, введите ассоциацию в поле поиска
最后一次有效

// 防抖
function debounce(fn, delay) {
    var timer = null;
    return function () {
        var that = this;
        var args = arguments;
        clearTimeout(timer);// 清除重新计时
        timer = setTimeout(function () {
            fn.apply(that, args);
        }, delay || 500);
    };
}


// 使用
function clickHandler() {
    console.log('防抖click!');
}
const handler = debounce(clickHandler);
document.getElementById('button').addEventListener('click', handler);

При запутанных вопросах помните:节流第一次有效，防抖反之

Категории