Что в этом скрипте не так?

Question

[Сергей Миллер]

Пытаюсь написать ф-ию чтобы если ширина экрана меньше 960, то //выполнять действия, а если больше, то //ничего не делать.

function resizeScrenn(){ // создал ф-ию
if($(window).width() <= 960){ // если ширина меньше 960
$('.menu li').on('click', function(){ //при клике на этот элемент
if($(this).children('.submenu').length > 0){ // если у него есть этот дочерний элемент
$(this).children('.submenu').slideToggle(300); // то показывать его
} else{ // а если нет
return false; // ничего не делать
}
});
} else{ // а если экран больше 960
return false; // тем более ничего не делать вообще
}};
resizeScrenn(); // вызываю ф-ию при загрузке страницы чтобы сразу трекнуть ширину экрана
$(window).resize(function(){ // а теперь если окно рисайзнули (и это очень важно трекать)
resizeScrenn();}); // то снова запускаем эту ф-ию

Проблема в том, что при загрузке страницы все норм работает как и должно (при клике на пункт меню открывает субменю если оно есть), но стоит рисайзнуть экран и при клике на пункт меню, в котором есть субменю, то slideToggle срабатываем овер-дофига раз.

Вопрос: что сделал не так?
Спасибо за помощь.

Comments

[0xD34F]

Во-первых - ублюдочное форматирование.

Во-вторых - а вот ни хрена не скажу, потому что из-за "во-первых" код читать не стал.

[Сергей Миллер]

0xD34F, Эстетика? Не, не слышал.

Answer 1

[Максим]

Вы многократно подписываетесь на событие клика $('.menu li').on('click', function(){ при каждом ресайзе, поэтому и колбек вызывается много раз при клике.
Нужно подписку вынести из ф-ции resizeScrenn и проверять на флаг isTablet, а в resizeScrenn только обновлять этот флаг вот так:

/* Ready */
$(function() {
    $('.menu li').on('click', function() {
        if( window.isTablet && $(this).children('.submenu').length ) { // обработка флага isTablet происходит при клике
            $(this).children('.submenu').slideToggle(300);
        }
    });

    function resizeScrenn() {
        window.isTablet = $(window).width() <= 960;
    }
    $(window).resize( resizeScrenn ); // передаем ссылку на функцию
    resizeScrenn(); //вызываем ф-ию при загрузке страницы чтобы сразу трекнуть ширину экрана
});

Comments

[Сергей Миллер]

А если вот так? Что скажите?

var myWidth = 960;
var dick = false;

function resizeScrenn() {
if($(window).width() <= myWidth){
if (!dick){
$('.menu li').on('click', function() {
if($(this).children('.submenu').length > 0) {
$(this).children('.submenu').slideToggle(300);
} else {
return false;
}
}
);
dick = true;
};
} else {
return false;
}
};
resizeScrenn();
$(window).resize(function(){
resizeScrenn()
});

[Максим]

Сергей Миллер, тогда при ширине меньше 960 будет многократно происходить подписка на клик при каждом ресайзе. Подписку так или иначе нужно выносить из функции, которая многократно выполняется (я про resizeScrenn). Попробуйте мой код выше, должен корректно работать.

[Сергей Миллер]

Максим, да, корректно работает, мой вариант вроде тоже корректно

[Максим]

Сергей Миллер, ох, я не прав, там дальше неожиданно dick = true; стоит, тогда будет другая проблема - флаг не изменится даже если ширина окна изменится и клик по прежнему будет отрабатывать.

Код тяжело читать, логика усложнена. Лучше проще писать и тогда будет проще поддерживать.

Answer 2

[Evanescing]

Как вариант, загнать ширину экрана в параметр или переменную, проверять ширину экрана в начале ресайза и в ходе, и не запускать on('click', если в обоих случаях ширина <= 960 . В ходе ресайза обновлять переменную/параметр.

Ещё вариант добавить вспомогательный класс элементу .menu li или .menu, если ширина <= 960, и click вешать на тот класс. Проверять наличие класса, чтобы не вешать множество обработчиков click на один элемент.

Comments

[Сергей Миллер]

Можете пример набросать?