Функция изменения размера срабатывает несколько раз
Я использую метод resize() для запуска функции, которая вернется на различные размеры области просмотра, такие как 992 768 и т. д. проблема в том, что функция выполняется каждый раз, вызывая сбой в DOM. пример в кодеке https://codepen.io/paul-solomon/pen/WBEgQe
//javascript
$(window).resize(function(){
nh_masonry.data.loadorder();
});
//css
.masonry_grid_quarter__container{
margin-bottom: 8px;
column-count:3;
column-gap:8px;
}
@media screen and (max-width:992px){
.masonry_grid_quarter__container{
column-count:2;
}
}
@media screen and (max-width:768px){
.masonry_grid_quarter__container{
column-count:2;
}
}
@media screen and (max-width:580px){
.masonry_grid_quarter__container{
column-count:1;
}
}
ожидаемый результат: функция изменения размера выполняется в определенных окнах просмотра фактический результат: несколько раз выполняет изменение размера, создавая сбой DOM.
Мне не повезло с этим. когда console.info(), кажется, что объект добавляется несколько раз при изменении ширины окна браузера, какие-либо другие предложения?
Пол, я сейчас смотрю на ваш codepen, что вы можете сделать, так это иметь переменную, которая отслеживает текущее состояние окна просмотра, позвольте мне кое-что исправить для вас.
Привет Пол, попробуйте мое решение ниже. Я также обновил ваш codepen.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужна переменная, которая отслеживает текущее состояние DOM.
Давайте создадим переменную с именем currentViewPort, которая может иметь значение «настольный компьютер», «планшет» или «мобильный телефон».
Когда размер окна изменится, мы изменим значение currentViewPort. Если currentViewPort уже соответствует нашему макету экрана, мы больше не будем вызывать функцию. Он будет вызываться только тогда, когда мы введем другой макет.
Вот он в действии: https://codepen.io/anon/pen/GaGboG?editors=1111
var App = (function ($) {
var nh_masonry = {};
var currentViewPort = ""
//sets initial reorder variable
nh_masonry.vars = { reorder : false}
nh_masonry.onload = function () {
// when the document is loaded sets the reorder variable to true
// and also loads the order object method
nh_masonry.vars.reorder = !nh_masonry.vars.reorder;
nh_masonry.data.loadorder();
$(window).resize(function(){
// re-set layout after resize
if ($( window ).width() <= 992 && $( window ).width() > 768 && currentViewPort !== "desktop"){
currentViewPort = "desktop"
console.info("desktop");
nh_masonry.data.loadorder();
// nh_masonry.responsive.tablet();
// nh_masonry.responsive.mobile();
} else if ($( window ).width() == 768 && currentViewPort !== "tablet"){
currentViewPort = "tablet"
console.info("tablet");
nh_masonry.data.loadorder();
// nh_masonry.responsive.tablet();
// nh_masonry.responsive.mobile();
} else if ($( window ).width() < 768 && $( window ).width() >= 380 && currentViewPort !== "mobile"){
currentViewPort = "mobile"
console.info("mobile");
nh_masonry.data.loadorder();
// nh_masonry.responsive.tablet();
// nh_masonry.responsive.mobile();
}
})
};
Я бы предложил использовать else if, таким образом, вам не нужно читать все это, чтобы увидеть, может ли произойти несколько
эта переменная действительно решает проблему многократного запуска, однако последний вопрос заключается в том, правильно ли codepen отображает изменение размера события DOM, заметив, что мне нужно обновить, чтобы увидеть правильный порядок загрузки слева направо для адаптивного просмотра — Кристофер Нго
@PaulSolomon Я не думаю, что codepen хорошо показывает изменение размера события DOM. Всякий раз, когда вы изменяете размер браузера codepen, он пытается сделать что-то свое поверх того, что мы написали. Попробуйте это в своем локальном проекте, и все должно получиться так, как ожидалось.
Привет Пол, удачи в том, чтобы заставить это работать?