Почему выполняется JS код многократно?
Код у меня получился рабочий, но меня смущает то, что в консоле выполняется многократное действия:
При разрежении экрана больше 768 пикселей плагин инициализируется, если меньше 768 пикселей то код не выполняется (дестрой):
const searchLeftContent = $(".search-left-content");
(checkAndRepaint)();
window.onresize = checkAndRepaint;
function checkAndRepaint() {
if ($(window).width() >= 768) {
// Инициализация плагина
searchLeftContent.mCustomScrollbar({
theme: "dark-3"
});
console.log('Initial');
} else {
// Дестрой плагина
searchLeftContent.mCustomScrollbar("destroy");
console.log('destroy');
}
}Я специально поместил код console.log('Initial'); что бы было ясно сколько раз выполняется действия скрипта - http://joxi.ru/V2Ve6qVfyv9Ymv меня смущают цифры, они возникают тогда когда я меняю размер окна браузера. Подскажите правильно ли написан скрипт?
PS. Тут можно посмотреть работу скрипта http://test.buyhtml.ru/result.html
Чтобы улучшить производительность, рекомендую вам воспользоваться функцией debounce. Таким образом, если вы потянете окошко, то функция не будет вызвана много раз подряд и не нагрузит браузер почём зря, она выполнится один раз после того, как пройдёт 250 мс после события resize.
const searchLeftContent = $(".search-left-content");
var dbCheckAndRepaint = debounce(checkAndRepaint, 250);
(checkAndRepaint)();
window.onresize = dbCheckAndRepaint;
function checkAndRepaint() {
if ($(window).width() >= 768) {
// Инициализация плагина
/*searchLeftContent.mCustomScrollbar({
theme: "dark-3"
});*/
console.log('Initial');
} else {
// Дестрой плагина
//searchLeftContent.mCustomScrollbar("destroy");
console.log('destroy');
}
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
- Почему SERVER_ADDR имеет не тот IP 47920 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23904 visits
- Как через css изменить цвет png изображения? 10401 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9278 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 27.3.2025 | 18:14