Понятия и примеры

Функция debounce (дебаунс)

Обратный вызов выполняется через n секунд после запуска события, и если он снова запускается в течение этих n секунд, таймер переустанавливается.

Посмотрите на 🌰 (каштан):

//模拟一段ajax请求
function ajax(content) {
  console.log('ajax request ' + content)
}

let inputa = document.getElementById('unDebounce')

inputa.addEventListener('keyup', function (e) {
    ajax(e.target.value)
})

Взгляните на беговые результаты:

Как видите, пока мы нажимаем на клавиатуру, этот запрос ajax будет запущен. Это не только пустая трата ресурсов с точки зрения ресурсов, но и в практических приложениях пользователи будут запрашивать только после вывода полных символов. Давайте оптимизируем его:

//模拟一段ajax请求
function ajax(content) {
  console.log('ajax request ' + content)
}

function debounce(fun, delay) {
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
}
    
let inputb = document.getElementById('debounce')

let debounceAjax = debounce(ajax, 500)

inputb.addEventListener('keyup', function (e) {
        debounceAjax(e.target.value)
    })

Взгляните на беговые результаты:

Видно, что после того, как мы добавили антишейк, при частом вводе запрос не будет отправляться, а функция будет выполняться только тогда, когда у вас нет ввода в течение заданного интервала. Если вы перестанете печатать, а затем снова введете в течение указанного интервала времени, время будет запущено заново. Еще один взгляд 🌰:

    
let biu = function () {
    console.log('biu biu biu',new Date().Format('HH:mm:ss'))
}

let boom = function () {
    console.log('boom boom boom',new Date().Format('HH:mm:ss'))
}


setInterval(debounce(biu,500),1000)
setInterval(debounce(boom,2000),1000)

Взгляните на беговые результаты:

Это 🌰 является хорошим объяснением, если функция выполняется в течение интервала, время будет запущено повторно. biu будет выполняться каждую 1 секунду после выполнения первых 1,5 секунд, а стрела не будет выполняться ни разу. Поскольку его временной интервал равен 2 с, а время выполнения — 1 с, отсчет времени перезапускается каждый раз.

Личное понимание Функция антивстряски заключается в том, чтобы прочитать статью, когда маг посылает навык.Если навык не закончен, нажмите навык, чтобы прочитать статью снова.

функция дроссельной заслонки

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

Посмотрите один 🌰:

  function throttle(fun, delay) {
        let last, deferTimer
        return function (args) {
            let that = this
            let _args = arguments
            let now = +new Date()
            if (last && now < last + delay) {
                clearTimeout(deferTimer)
                deferTimer = setTimeout(function () {
                    last = now
                    fun.apply(that, _args)
                }, delay)
            }else {
                last = now
                fun.apply(that,_args)
            }
        }
    }

    let throttleAjax = throttle(ajax, 1000)

    let inputc = document.getElementById('throttle')
    inputc.addEventListener('keyup', function(e) {
        throttleAjax(e.target.value)
    })

Взгляните на беговые результаты:

Видно, что когда мы продолжаем вводить, ajax будет выполняться каждую 1 секунду в соответствии с установленным нами временем.

В сочетании только с biubiubiu 🌰:

    let biubiu = function () {
        console.log('biu biu biu', new Date().Format('HH:mm:ss'))
    }

    setInterval(throttle(biubiu,1000),10)

Какой бы маленький интервал времени выполнения мы ни установили, он всегда выполняется только один раз в течение 1 с.

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

Суммировать

• Функция защиты от сотрясений и функция дросселирования предотвращают частые срабатывания в определенное время, но принципы у этих двух братьев разные.
• Функция anti-shake выполняется только один раз в определенный период времени, а функция throttling выполняется через определенные промежутки времени.

Комбинируйте сценарии приложений

• debounce
  • Поиск Поиск Lenovo, когда пользователи постоянно вводят значения, использует защиту от сотрясений для экономии ресурсов запроса.
  • Когда окно вызывает изменение размера, непрерывная настройка размера окна браузера будет постоянно запускать это событие и использовать анти-дрожание, чтобы оно запускалось только один раз.
• throttle
  • Мышь непрерывно нажимается для срабатывания, mousedown (срабатывает только один раз в единицу времени)
  • Слушайте события прокрутки, например, нужно ли скользить вниз, чтобы автоматически загрузить больше, использовать дроссель, чтобы судить

расширять

Ссылка на ссылку:блог woo woo woo.cn на.com/self-sustaining/afraid/533…

Вот классический код на высоте:

    function throttle(method, context) {
        clearTimeout(method.tId);
        method.tId = setTimeout(function () {
            method.call(context);
        }, 100)
    }

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

Оригинальное авторское предложение хорошо написано.

Возьмем, к примеру, дроссель: однажды учитель дал вам задание, чтобы вы могли глубже понять дроссель, и давайте поговорим об этом в классе на следующий день. Чжан Сан был очень счастлив. Он видел эту концепцию в классической книге "Продвинутое программирование на JavaScript". Когда он открыл ее, там было всего две страницы, и объяснение было очень ясным. Прочитав ее, он был счастлив заняться другими вещами. . Что касается Ли Си, он чувствовал, что Elevation III мало что говорит, поэтому он отправился в Google за другими сведениями о дросселе и был взволнован, увидев несколько способов написания функции дросселя. на этот раз он обнаружил, что одновременно с дроссельной заслонкой появляется дребезг, что это, черт возьми, такое? Во всяком случае, учитель не сказал, я увижу это позже, поэтому я пошел играть в игру довольный. А Ван Ву, как и Ли Си, открыл debounce, что это? Давайте разберемся вместе, а затем обнаружим, что использование debounce на самом деле такое же, как дроссель в Elevation 3! Продолжайте копать и обнаружите, что функция дроссельной заслонки в Elevation 3 на самом деле должна называться устранением дребезга.В конце концов, Ван Ву полностью разобрался в дроссельной заслонке и подавлении дребезга.