В этой статье мы поговорим о нескольких методах, которые помогут вам в чистых методах разработки.
Вы когда-нибудь хотели сделать функцию поиска более удобной для пользователя и обеспечить лучший пользовательский опыт, а также эффективность сети? Например, когда любой пользователь ищет запрос, вы можете предоставить список данных, похожих на него, не беспокоя ваш сервер.
Проблема. Каждый пользовательский ввод должен сравниваться с содержимым вашей базы данных и предоставлять ответ клиенту. Это может привести к множественным сетевым вызовам и даже к высокой частоте манипуляций с DOM.
Итак, какое решение ??
Есть несколько методов, которые можно реализовать, чтобы сделать наш продукт удобным для пользователя, даже не нанося вреда нашим внутренним службам. Мы можем использовать эти методы в JavaScript и предоставить пользователю лучший опыт. Они известны как Debouncing and Throttling. Нам нужно знать setTimeout и clearTimeout, прежде чем двигаться дальше.
setTimeout (функция, delay_in_ms)
— это функция планирования в JavaScript, которую можно использовать для планирования выполнения любой функции. Это веб-API, предоставляемый браузерами и используемый для выполнения функции через определенное время. Вот основной синтаксис:
var timerId = setTimeout(callbackFunction, timeToDelay)Функция setTimeout принимает входные данные как callbackFunction, то есть функцию, которая будет выполняться после истечения таймера, а timeToDelay — это время в миллисекундах, по истечении которого будет выполняться callbackFunction.
Функция setTimeout возвращает timerId, положительное целочисленное значение для уникальной идентификации таймера, созданного вызовом setTimeout; это значение можно передать в clearTimeout для отмены тайм-аута.
function delayFuncExec() {
console.log("I will be called after 100 milliseconds");
}
var timerId = setTimeout(delayFuncExec, 100)
console.log("Timer Id: " + timerId)Здесь delayFuncExec будет выполняться через 100 миллисекунд. timerId будет хранить целое число, возвращаемое функцией setTimeout.
очистить время ожидания (идентификатор таймера)
Функция clearTimeout используется для отмены тайм-аута, ранее установленного вызовом функции setTimeout. clearTimeout принимает в качестве входных данных timerId, возвращенное функцией setTimeout, и отменяет свое выполнение. Итак, если вы хотите отменить выполнение какой-либо функции setTimeout, вы можете использовать функцию clearTimeout, чтобы отменить ее, передав ее timerId.
Пример
function delayFuncExec() { // This statement will not be printed as it will be cancelled by clearTimeout console.log("I will not be executed as I will be cancelled"); }var timerId = setTimeout(delayFuncExec, 100) console.log("Timer Id: " + timerId)clearTimeout(timerId)
устранение дребезга
Возьмем сценарий, в котором пользователь начинает поиск на веб-сайте. Он пытается найти продукт по названию. Как вы думаете, какой результат он хочет, когда набирает первую букву или когда набирает последнюю?
Мы не можем этого предположить. Правильно ?
Да, мы можем ограничить поиск, подождав, пока он перестанет печатать дальше. Поскольку вскоре он останавливает отсчет времени, мы можем понять, что он хочет увидеть результаты.
- Создайте функцию устранения дребезга, используя timerId = setTimeout(apiFunction, 500), и сохраните timerId во внешней переменной области.
- Если отклоненная функция вызывается снова до 500, очистите событие с помощью clearTimeour и создайте новое.
- Таким образом, фактический вызов будет выполняться только тогда, когда пользователь ждет 500 миллисекунд после ввода слова. Как вы можете видеть на изображении ниже,
Пример :
var timerId;
var searchBoxDom = document.getElementById('search-box');
// This represents a very heavy method. Which takes a lot of time to execute
function makeAPICall() {
var debounceDom = document.getElementById('debounce-count');
var debounceCount = debounceDom.innerHTML || 0;
debounceDom.innerHTML = parseInt(debounceCount) + 1
}
// Debounce function: Input as function which needs to be debounced and delay is the debounced time in milliseconds
var debounceFunction = function (func, delay) {
// Cancels the setTimeout method execution
clearTimeout(timerId)
// Executes the func after delay time.
timerId = setTimeout(func, delay)
}
// Event listener on the input box
searchBoxDom.addEventListener('input', function () {
var apiCallCountDom = document.getElementById('show-api-call-count');
var apiCallCount = apiCallCountDom.innerHTML || 0;
apiCallCount = parseInt(apiCallCount) + 1;
// Updates the number of times makeAPICall method is called
apiCallCountDom.innerHTML = apiCallCount;
// Debounces makeAPICall method
debounceFunction(makeAPICall, 200)
})Дросселирование
Регулирование — это метод, при котором независимо от того, сколько раз пользователь запускает событие, присоединенная функция будет выполняться только один раз за заданный интервал времени.
- Пользователь создает огромное количество событий, и эти события записываются.
- Процесс, связанный с событиями, будет выполняться только по истечении времени исправления.
На изображении выше мы видим, что когда пользователь выполняет прокрутку, количество событий scroll намного больше, чем количество раз, когда регулирование выполняло функцию. Кроме того, регулирование выполняло функцию через равные промежутки времени, независимо от того, сколько раз было запущено событие scroll. Давайте проверим код дросселирования.
var timerId;
var divBodyDom = document.getElementById('div-body');
// This represents a very heavy method which takes a lot of time to execute
function makeAPICall() {
var debounceDom = document.getElementById('debounc-count');
var debounceCount = debounceDom.innerHTML || 0;
debounceDom.innerHTML = parseInt(debounceCount) + 1
}
// Throttle function: Input as function which needs to be throttled and delay is the time interval in milliseconds
var throttleFunction = function (func, delay) {
// If setTimeout is already scheduled, no need to do anything
if (timerId) {
return
}
// Schedule a setTimeout after delay seconds
timerId = setTimeout(function () {
func()
// Once setTimeout function execution is finished, timerId = undefined so that in <br>
// the next scroll event function execution can be scheduled by the setTimeout
timerId = undefined;
}, delay)
}
// Event listener on the input box
divBodyDom.addEventListener('scroll', function () {
var apiCallCountDom = document.getElementById('show-api-call-count');
var apiCallCount = apiCallCountDom.innerHTML || 0;
apiCallCount = parseInt(apiCallCount) + 1;
// Updates the number of times makeAPICall method is called
apiCallCountDom.innerHTML = apiCallCount;
// Throttles makeAPICall method such that it is called once in every 200 milliseconds
throttleFunction(makeAPICall, 200)
})Я хотел бы, чтобы вы все пробовали эти методы каждый раз, когда вы сталкиваетесь с такими сценариями во время разработки.
Источники:
Свяжитесь со мной: [email protected]
