задний план
Когда я сегодня кодировал, я сделал окно поиска, и именно это окно поиска заставило меня и моих друзей на заднем плане прямо измениться с ферромагнитных братьев на пластмассовых. Так что случилось? Это на самом деле очень просто, но на самом деле очень беспомощно, то есть я разбил его доступ к интерфейсу со скоростью руки короля!
Когда мы обычно разрабатываем, будет много сценариев, которые часто запускают события, такие как запросы в реальном времени из окна поиска, onmousemove, изменение размера, onscroll и т. д. Иногда мы не можем или не хотим часто запускать события. Что нам делать? В это время следует использовать функцию защиты от сотрясений и функцию дросселирования!
Функция debounce (дебаунс)
Что такое анти-шейк? Одно и то же событие срабатывает несколько раз за короткое время, выполняется только последний раз или только при старте, середина не выполняется. Поднимите каштан: Вы идете к автобусу, держите людей, водитель-мастер не будет водить во время процесса сплошных людей, только когда последний человек сядет в автобус, старый водитель будет водить!嘿嘿! Мы сохраняем событие onmousemove, чтобы сохранить цифровой +1 в качестве примера. код показывает, как показано ниже:
- Без стабилизации и троттлинга цифры растут как эпилепсия
//变量初始化
var xcd = document.getElementById('xcd'),
count = 1;
//要执行的操作 数字+1
function doSomething() {
xcd.innerHTML = count++;
};
//触发onmousemove事件 正常情况下
xcd.onmousemove = doSomething;
- Используйте зеленую базовую версию антивибратора
//绿色基础版：
function debounce(doSomething,wait){
var timeout;//需要一个外部变量，为增强封装，所以使用闭包
return function(){
var _this = this,
_arguments = arguments;//arguments中存着e
clearTimeout(timeout);
timeout = setTimeout(function(){
doSomething.apply(_this,_arguments);
},wait);
}
}
//触发onmousemove事件
xcd.onmousemove = debounce(doSomething,1000);
- Используйте версию Anti-Shake с немедленным выполнением
//立即执行版
function debounce(doSomething,wait,isImmediate){
var timeout;
return function(){
var _this = this,
_arguments = arguments;
clearTimeout(timeout);
if(isImmediate){
var isTrigger = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
isTrigger&&doSomething.apply(_this,_arguments);
}else{
timeout = setTimeout(function(){
doSomething.apply(_this,_arguments);
},wait);
}
}
}
//触发onmousemove事件
xcd.onmousemove = debounce(doSomething,1000,true);
функция дроссельной заслонки
Что такое дросселирование? Регулирование — это процесс непрерывного запуска событий для выполнения функции через равные промежутки времени. Дросселирование снизит частоту выполнения, например, каждую 1 секунду функция будет выполняться только один раз, независимо от того, сколько раз событие запускается за эту 1 секунду.
Для каштана: вы пьете много воды каждый день, но вам не придется идти к каждому пьющую глоток воды в унитаз, если есть горшки друзей Цзян Зи, советую вам пойти в больницу, чтобы увидеть Это → → → Туалет, чтобы увидеть вас неприятностей - хотя вы пили, но не всегда ходили в туалет, обычный ритм! Питьевая вода пить на туалете! Питьевая вода пить на туалете! Хотя это был триггер, но каждый раз в эксплуатации только один раз, который является функцией дроссельной заслонки!
- Использование временной метки версии дроссельной заслонки
//绿色基础版之时间戳版
function throttle(doSomething,wait){
var _this,
_arguments,
initTime = 0;
return function(){
var now = +new Date();//将new date()转化为时间戳
_this = this;
_arguments = arguments;
if(now - initTime>wait){
doSomething.apply(_this,_arguments);
initTime = now;
}
}
}
//触发onmousemove事件
xcd.onmousemove = throttle(doSomething,1000);
- Используйте версию с дроссельным таймером
//绿色基础版之定时器版
function throttle(doSomething,wait){
var timeout;
return function(){
var _this = this;
_arguments = arguments;
if(!timeout){
timeout = setTimeout(function(){
timeout = null;
doSomething.apply(_this,_arguments);
},wait);
};
}
}
//触发onmousemove事件
xcd.onmousemove = throttle(doSomething,1000);
Конечно, могут быть некоторые продукты BT, которые будут спрашивать вас, можете ли вы сначала выполнить их немедленно, выполнить с фиксированным интервалом в середине и выполнить в конце? Пришло время установить Б. Для такого фронтенда, как я, это просто необходимо, просто соедините их вместе, и двойной ремонт — мой любимый *@o@*
- Используйте двойной меч удушения
//节流之双剑合璧版
function throttle(doSomething, wait) {
var timeout, _this, _arguments,
previous = 0;
var later = function() {
previous = +new Date();
timeout = null;
doSomething.apply(_this, _arguments)
};
var throttled = function() {
var now = +new Date();
//下次触发 doSomething 剩余的时间
var remaining = wait - (now - previous),
_this = this;
_arguments = arguments;
// 如果没有剩余的时间了
if (remaining <= 0) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
doSomething.apply(_this, _arguments);
} else if (!timeout) {
timeout = setTimeout(later, remaining);
}
};
return throttled;
}
//触发onmousemove事件
xcd.onmousemove = throttle(doSomething,1000);