JavaScript дросселирования и стабилизация изображения

Троттлинг: в течение указанного времени, неоднократно запускающее событие, но выполняется только один раз

Сцена: поиск поле ввода, карта рендеринг

Оптимизация пользовательского опыта

/ * * 
 * Дроссель в течение определенного времени независимо от того , сколько раз триггер выполняется только один раз 
 * {Функция} @param сноска фактические бизнес логические функции должны быть выполнены 
 * @param {Number} продолжительность указанного периода времени, функция бизнес - логика может быть выполнена только один раз миллисекунды 
 * / 
функция дроссельной заслонки (Fn, ПРОДОЛЖИТЕЛЬНОСТЬ) { 
    ЛПЭ ПРЕД = Date.now (), timerId = нуль 
    возврата  функции () { 
        Выпускаемое в настоящее время = Date.now () 
        Выпускаемое Args = аргументы 
        clearTimeout (timerId) // должны Очистить таймер заранее, так как отрасль еще может выполнить, установить таймер, если выполняется , если второе условие запуска, общее будет выполняться дважды , 
        если ((теперь - предыдущая)> = ПРОДОЛЖИТЕЛЬНОСТЬ) { // в течение заданного времени выполняют функцию набора 
            fn.apply ( на этот , арг)
            пред = Теперь 
        } еще { // нет заранее заданный момент времени, но событие не срабатывает, повторный запуск таймера 
            timerId SetTimeout = (() => { // здесь , чтобы гарантировать , что по крайней мере один раз, или если сбой функции условия не будет выполнять 
                PREV = Теперь 
                fn.apply ( это , арг) 
            }, Duration) 
        } 
    } 
}

 

 

Стабилизация изображения: несколько событий запуска, чтобы вызвать в последний раз, чтобы начать, с задержкой на заданное время для выполнения

Сцена: Загрузить браузер изображения при прокрутке, нажмите кнопку отправки

Оптимизация производительности

/ * * 
 * Встряхнуть независимо от того , сколько раз событие триггера , чтобы вызвать последний раз восторжествует, установив время задержки выполнения 
 * @param {Функция} функция п фактической бизнес - логики должна быть выполнена 
 * @param {Number} продолжительность в период после того, как функция бизнес - логики начинается выполнение в миллисекундах 
 * / 
функция Debounce (Fn, ПРОДОЛЖИТЕЛЬНОСТЬ) { 
    Выпускаемое timerId = нуль 
    возврата  функции () { 
        clearTimeout (timerId) // каждый триггер требуется сбросить таймер и повторного запуска таймера 
        = SetTimeout timerId (() => { 
            fn.call ( это , аргументы) 
        }, ПРОДОЛЖИТЕЛЬНОСТЬ) 
    } 
}

 

Иногда дроссельная заслонка и стабилизация изображения может быть использована взаимозаменяемо, смотреть на потребности бизнеса, не настолько жесткий