JS-функция защиты от сотрясений и функция дросселирования
введение проблемы
Вопрос 1:Если реализована функция перетаскивания dom, но при привязке события перетаскивания обнаруживается, что каждый раз, когда элемент немного перемещается, срабатывает большое количество функций обратного вызова, что приводит к зависанию браузера напрямую, что мне делать в это время?
**Вопрос 2:** Если кнопка привязана к событию публикации отправки формы, но иногда пользователь нажимает кнопку несколько раз в крайне плохих условиях сети, что приводит к повторной отправке формы, как предотвратить возникновение нескольких представления?
В ответ на описанный выше сценарийФункция защиты от тряскиа такжерегулирование функцииДва понятия, в общем:
Эти два методаУправляет количеством раз, когда функция выполняется на временной шкале.
Функция debounce (дебаунс)
концепция: 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
Примеры из жизни: 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。
функция дроссельной заслонки
концепция: 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
Примеры из жизни: 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。
диаграмма
Допустим, общее время, которое мы наблюдаем, составляет 10 секунд, а в качестве минимального интервала для события указана 1 секунда.
Если частота триггерного события0.5s/次,Так
Функция защиты от сотрясения, как показано на рисунке
Поскольку ни одна секунда не может быть запущена снова, ни одно из событий в конце концов не будет успешным.
Функция дросселирования показана на рисунке
Поскольку управление осуществляется не чаще одного раза в секунду, частота0.5s/次, поэтому каждую секунду событие становится недействительным. окончательный контроль1s/次
Если частота триггерного события2s/次,Так
Функция защиты от сотрясения, как показано на рисунке
2s/次Он превысил указанное минимальное время, поэтому срабатывает каждые две секунды.
Функция дросселирования показана на рисунке
такой же,2s/次Это больше минимального ограничения по времени, поэтому каждый триггер вступит в силу.
Сценарии применения
Для функции Anti-Shake возможны следующие сценарии применения:
- Добавьте функцию защиты от сотрясений на кнопку, чтобы форма не отправлялась несколько раз.
- При выполнении проверки AJAX для непрерывного ввода в поле ввода использование функции защиты от сотрясений может эффективно сократить количество запросов.
- судить
scrollсползать ли на дно,滚动事件+函数防抖
В целом, хорошо для нескольких мероприятийОдин ОтветСлучай
Возможны следующие сценарии регулирования функции:
- Частота обновления в игре
- Перетаскивание элемента DOM
- Функция кисти холста
В целом подходит длямассовые мероприятиясделать это вовремясреднийНазначение триггеров.
исходный код
Функция защиты от тряски:
function debounce(fn, wait) {
var timer = null;
return function () {
var context = this
var args = arguments
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function () {
fn.apply(context, args)
}, wait)
}
}
var fn = function () {
console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次
setInterval(debounce(fn,2000),1000) // 不会触发一次（我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）
Причина, по которой функция возвращается, заключается в том, что сам антишейк больше похож на модификацию функции, поэтому выполняется каррирование функции. Внутри также используются замыкания, а переменные замыканийtimer.
регулирование функции
function throttle(fn, gapTime) {
let _lastTime = null;
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn();
_lastTime = _nowTime
}
}
}
let fn = ()=>{
console.log('boom')
}
setInterval(throttle(fn,1000),10)
Как показано на рисунке реализована простая функция дросселирования, результат一秒打出一次boom
резюме
Функция подавления дребезга и функция дросселированияКонтролируйте количество раз, когда функция выполняется на временной шкале. Anti-shake можно сравнить с电梯不断上乘客, дросселирование можно рассматривать как幻灯片限制频率播放电影.
Расширенное чтение
SegmentFault: функция троттлинга и функция защиты от встряхивания