Как исчерпывающе и правильно отвечать на вопросы интервьюера, направленные против тряски и дросселирования?

Понятия троттлинга и анти-тряски не всем знакомы, но понимаете ли вы на самом деле реальную разницу между ними? Можно ли узнать, когда использовать антивибрацию в реальной разработке? Что такое троттлинг?

Прочитав эту статью, вы получите:

Четко понимать разницу между анти-тряской и троттлингом и уметь правильно применять ее в реальной разработке.
Разнообразная реализация кода
Применение свойств замыканий

Что такое анти-шейк

debounce(fn, threshhold)

Технологии должны в конечном счете служить обществу.Все что оторвано от бизнеса(общества)-хулиганит,и антишейк не исключение.В реале для фотосъемки(искусственный антишейк,а не умный вид :joy:), если вы делаете селфи , вы точно не будете нажимать на спуск до того, как объектив будет стабилен (PS: если вы хотите этот эффект размытия, когда я не сказал :no_mouth:), то есть объектив нестабилен (дрожание рук) вы не будете нажимать на спуск, если вы чувствуете себя устойчиво, вы нажмете на спуск, аналогично:

Функция защиты от сотрясенийdebounceЭта функция эквивалентна помощи в определении момента нажатия спуска затвора.
fnэквивалент затвора
threshhold(порог) эквивалентен временному порогу, который человеческое тело должно испытать, чтобы почувствовать стабильность
Только после стабилизации будет нажиматься затвор для выполнения fn, то есть один раз интервалthreshholdКак только возникает дрожание, он будет переоценивать стабильность
еслиthreshholdИнтервал не был стабильным, первый триггерthreshholdПосле мс fn не будет выполняться.То же было нестабильно, и fn никогда не будет выполняться (если бесконечный цикл)

// fn => 2
function debounce(fn, threshhold){ // 1
    if(!fn instanceof Function) {
        throw new TypeError('Expected a function')
    }
    let timer = null;
    return function () {
        clearTimeout(timer); // 3
        timer = setTimeout(() => { 
            fn.apply(this) // 4 
        },threshhold)
    };
}

Анализ кода:debounceЭто равносильно тому, чтобы помочь вам определить, когда нажимать затвор.Выполняемая fn эквивалентна затвору.Порог времени стабилизации восприятия человеческого тела составляетthreshhold, если два последовательных звонка (соответствующих дрожанию камеры) меньшеthreshhold, то необходимо сбросить начальную точку стабильного интервала, то есть сброситьclearTimeout(timer), конечно, если интервал между двумя временами превышаетthreshhold, сброс больше не может повлиять на вызов, который уже произошел, и, наконец, таймер выполняетсяfn.apply(this)Просто наконец-то можно нажимать затвор, не тряся руками :joy:

что дросселирует

throttle(fn, threshhold)

В реале есть много примеров применения концепции дросселирования в жизни.Например,близится канун Нового года,а вокзал учитывает всеобщую безопасность и ограничивает стоимость входа на вокзал(чиновника надо звать текущий лимит, но выражение на самом деле имеет тот же смысл. ) Потому что количество людей, принимающих (размещающих) станцию, ограничено в единицу времени, и есть более привычные примеры, такие как игры King of Glory или League of Legends moba , у всех есть верхний предел скорости атаки (скорость атаки 2,5), иными словами, предположим, программа устанавливает у героя максимум пять А в секунду, так что даже если у вас быстрая скорость рук, вы не сможете поразить шестой A в течение 1 с. Из приведенного выше примера мы можем получить:

threshholdИнтервальная функцияfnНезависимо от того, сколько раз он срабатывает, первый спусковой крючокthreshholdПосле того, как ms выполняются только один раз
Второй триггер длиннее первогоthreshhold, второй раз будет выполнен сразу

Согласно этим двум пунктам, есть два способа достижения

Первый

function throttle(fn, threshhold) {
    if(!fn instanceof Function) {
        throw new TypeError('Expected a function')
    }
    let limited = false;  // 节流阀标志位
    let start = Date.now();
    threshhold = threshhold || 500
    return function (...args) {
        let current = Date.now();
        limited = limited && current- start < threshhold
        if(!limited) {
                fn.apply(this,args);
                limited = true;
                start = Date.now();
        }
    }
}

Анализ кода: ПройденоlimitedПоложение флага дроссельной заслонки имитирует, требуется ли в данный момент дросселирование (ограничение тока), первое значение по умолчаниюfalseТо есть поток не ограничивается в первый раз (станция пуста :joy: ), после лимита потока (limited = true) и только два интервала времени (current- start)Превосходитьthreshhold, то ограничение будет снято, и будет вызван fn, то есть станция пропустит пассажиров на станцию и введет новый цикл для сброса времени начала.start

второй

function throttle2(fun, threshhold) {
    if(!fun instanceof Function) {
        throw new TypeError('Expected a function')
    }
    let limited = false; // 节流阀标志位
    let timer = null;
    let start = Date.now();
    threshhold = threshhold || 500
    return function (...args) {
        let current = Date.now();
        limited = limited && current- start < threshhold
        if (limited) {
            clearTimeout(timer)
            timer = setTimeout(() => {
                limited = true
                start = Date.now()
                fun.apply(this, args)
            }, threshhold)
        }else {
            limited = true
            start = Date.now();
            fun.apply(this,args)
        }
    }
}

Анализ кода: второй используетsetTimeoutМетод таймера плюс, если последнее расстояние срабатывания является последним вызовомfnменьше, чемthreshholdЗатем обратный вызов таймера, установленный на этот раз, будет вызван в следующемthreshholdВыполняется внутри цикла, поэтому этот способ срабатывает несколько разfnвсего будет выполнено两次, только второй раз будет в следующемthreshholdвыполнять в цикле

Сравнение двух способов дросселирования

первыйthreshholdнесколько триггеров в интервале,fnОн будет выполнен только один раз, и последний раз не будет выполнен в следующем цикле.Например, если уровень А превышает лимит (троттлинг) 5 раз в течение 1 секунды, шестой раз не будет говорить, что он будет автоматически выравниваться А в следующую секунду., но сразу отбросить

второй, аthreshholdнесколько триггеров в интервале,fnВсего он будет выполнен дважды, обратите внимание, что во второй раз будет введеноСледующийthreshholdПериодическое исполнение

Сравните два

Тот же пункт:

На самом деле, это существенно для сохранения производительности программы (для предотвращения высокочастотных вызовов функций)
Кэшировать переменные (состояние) с помощью замыканий
Может быть достигнуто с помощью setTimeout

разница:

Используйте анти-встряску, может быть, nthreshholdпосле интервала времениfnТакже не выполняется, но срабатывает при троттлингеthreshholdВыполняется только один раз в интервале
такой жеthreshholdСрабатывает непрерывно в течение интервала, антитряска выполняется только один раз, а троттлинг выполняется дважды, но в разныеthreshholdцикл
Акценты разные: Anti-shake фокусируется на стабилизации и может выполняться только один раз, а throttling делает упор на количество раз в периоде, то есть на частоту выполнения, и не ограничивает общее количество раз за все время.

Сценарии применения

Стабилизатор:

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

Дросселирование:

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

Суммировать

Независимо от того, в чем хороша технология, плюсы и минусы технологии и реализации нельзя рассматривать только с технической точки зрения, что бессмысленно.Например, для двух методов дросселирования функции у них есть подходящие сценарии, такие как вы Продукт должно быть похоже на ограничение скорости атаки в игре.Очевидно, первое решение троттлинга больше подходит.Что вы думаете о Юаньфан? :смех:(пс:исходный адрес гитхабаВключая одиночный тест)

Ссылка на ссылку

нажмите.com/docs/4.17.1…