Правильное объявление функции в js?

Question

[Alibek Kulseitov]

Привожу код в частоту и делаю так чтобы все было чисто и правильно.
Посмотрите на код ниже. Скажите правильно ли все вызывается?
А конкретно интересует метод вызова функции equalNews();

(function ($) {
    "use strict";

    // document ready function
    $(document).ready(function($){

        /*
        |--------------------------------------------------------------------------
        | Equal Height
        |--------------------------------------------------------------------------
        */

        window.equalNews = 0;

        function equalNews() {
            clearInterval(window.equalNews);
            if($(window).width() >= 992) {
                $('.equal-news__list').css('height', $('.equal-news__col').innerHeight());
                window.equalNews = setInterval(function(){
                    if($('.equal-news__list').innerHeight() != $('.equal-news__col').innerHeight()) {
                        $('.equal-news__list').css('height', $('.equal-news__col').innerHeight());
                    }
                }, 200);
            } else {
                $('.equal-news__list').css('height', 'auto');
            }
        }

        equalNews();
		
        /*
        |--------------------------------------------------------------------------
        | Social Side
        |--------------------------------------------------------------------------
        */

	// тут разные ивенты на клик мышки

        /*
        |--------------------------------------------------------------------------
        | Owl Carousel
        |--------------------------------------------------------------------------
        */

	// тут скрипт карусели

    });

    // window onload
    $(window).on('load',function(){

        // Call responsify function when window object is loaded
        $('jsResponsify').responsify();

        // Call equalNews function when window object is loaded
        equalNews();

    });

    // window onresize
    $(window).resize(function(){

        // Call responsify function when window object is loaded
        $('jsResponsify').responsify();

        // Call equalNews function when window object is loaded
        equalNews();

    });

}(jQuery));

Answer 1

[z_u_l]

Здравствуйте, если правильно понял вас, то можно воспользоваться медиазапросами javascript и не прибегать $(window).resize, который довольно часто вызывает функцию. Почитать про них можно тут

Если правильно вас понял и не налажал, то так:

$(function(){
    var mediaQuerySM = window.matchMedia('(max-width: 992px)');

    window.equalNews = 0;

    function equalNews(mediaQueryXS) {
        if (mediaQueryXS.matches) {

            $('.equal-news__list').css('height', $('.equal-news__col').innerHeight());
            window.equalNews = setInterval(function(){
                if($('.equal-news__list').innerHeight() != $('.equal-news__col').innerHeight()) {
                    $('.equal-news__list').css('height', $('.equal-news__col').innerHeight());
                }
            });

        } else {
            $('.equal-news__list').css('height', 'auto');
        }
    }

    equalNews(mediaQueryXS);
    mediaQueryXS.addListener(equalNews); 
});

Comments

[Alibek Kulseitov]

нет нет не совсем) Ниже прочитайте ответы)

Answer 2

[Александр Маджугин]

Я правильно понял что вы 5 раз в секундe обновляете css некоторых элементов в случае если ширина окна больше определенного значения?
Мне кажется тут не идет уже речь о том правильно или неправильно вызывается эта функци. Вопрос стоит о том - а на кой хрен она зывается?

В целом да - у вас есть апдейт на таймере и вы и его зачем-то перезапускаете и он будет перезапускаться, но если бы мне верстальщик дал такой код, я бы его выкинул даже не пытаясь разобраться что он делает.

Comments

[Alibek Kulseitov]

Вся функция equalheight не я писал) где-то взял на просторах гугла. Задумка такая изначально была чтобы высота контейнера .equal-news__list брала высоту у.equal-news__col

[Александр Маджугин]

Alibek Kulseitov, если вас волнует только вызов этой функции - то все правильно. Сама функция написана так, что апдейтит свой таймер при вызове.
Но то что она делает, это ппц.
Вот что она делает - она 5 раз в секунду считывает высоту двух блоков и приводит один к другому, если высоты разные. Т.е. она делает свое дело, но так, что нафиг бы оно было нужно.
У вас что, высота equal-news__col способна менятся даже просто так, без ресайза окна? А почему высота блока меняется только при определенной ширине?
Это совсем никак не решается с помощью ccs?

Если правильность кода вообще, то например мне очень не нравится когда внури $(window).on('чегоНибудьТам',function(){
есть какой-то код. Я такое всегда возвращаяю на переделку. Если так уж прямо хочется зафигачить анонимную функцию там, то внутри нее возможен только вызов какой-то одной функции и больше ничего.
Потому что когда вам понадобиться переназначить событие, например после догрузки ajax вы начнете копироват содержимое этих функци, и в итоге получите гору неуправляемого кода.

[Alibek Kulseitov]

Через css это не решится) Потому что разных разрешениях экрана высота то меняется и они находятся в разных родительских блоках. По этому через Js. Высота по задумке должна браться при загрузке страницы а так же ресайзе. Еще раз можете повторить почему $(window).on('чегоНибудьТам',function(){ Вам не нравится)? Хотелось бы услышать совет или критику

[Александр Маджугин]

Потому что разных разрешениях экрана высота то меняется и они находятся в разных родительских блоках.

Ну и что? Обертку над ними двумя с фиксированной высотой, а их на 100%. Не?

Высота по задумке должна браться при загрузке страницы а так же ресайзе.

Ну ок - я уже согласен на js при загрузке и ресайзе... Но зачем это делать непрерывно? Сделали при загрузке, потом сделали при ресайзе, но не так же что постоянно пока открыта страница долбить ее. Вы же рантайм загружаете.

Хотелось бы услышать совет или критику

Посмотрите на свой код. Вам не кажется что вы уже скопипастили код два раза один и тот же?
А именно:

$('jsResponsify').responsify();
        equalNews();

у вас уже в двух местах.

Представьте теперь что на этой странице заказчик захотел апдейт новости через ajax. Теперь надо написать функцию которая это делает и так как дом меняется надо тоже вызывать $('jsResponsify').responsify(); equalNews(); Так что они попадают и туда.
Через месяц в блок новости вставляется слайдер и теперь ваш код надо поменять на такой:

$('jsResponsify').responsify();
$('.slider').superSlider();
        equalNews();

Вы его обновляете, но у вас ломается слайдер при апдейте по ajax, потому что то, что код у вас этот скопирован еще и в ajax вы уже десять раз забыли и даже не помните в каком он файле.

А если бы вы изначально сделали так

function reinitPage () {
 // Call responsify function when window object is loaded
        $('jsResponsify').responsify();

        // Call equalNews function when window object is loaded
        equalNews();
}
 // window onload
    $(window).on('load',function(){reinitPage();});

    // window onresize
    $(window).resize(function(){reinitPage();});

:
То и ваш код был бы гораздо локаничнее, и слайдер вы бы не потеряли в ajax вызове. И перелапачивать ваш код не надо бы было в поисках вхождений jsResponsify

[Alibek Kulseitov]

Ну и что? Обертку над ними двумя с фиксированной высотой, а их на 100%. Не?

Нет =) Так как они вообще скажем в разных слоях. Представьте плавающий сайдбар и в нем есть футер. И в осноном контенте есть футер и оба футеры должны быть одной высоты сейчас скину ссылку Сайт прокрутите до самого низа и поймете.

Ну ок - я уже согласен на js при загрузке и ресайзе... Но зачем это делать непрерывно? Сделали при загрузке, потом сделали при ресайзе, но не так же что постоянно пока открыта страница долбить ее. Вы же рантайм загружаете.

Я же говорю код не мой, и да согласен каждый 5 сек это не нужная вещь. Как и писал ранее какие требования нужны. Просто с Js-ом очень слабо дружу по этому обратился сюда, чтобы посоветовали что да как.

То и ваш код был бы гораздо локаничнее, и слайдер вы бы не потеряли в ajax вызове. И перелапачивать ваш код не надо бы было в поисках вхождений jsResponsify

То есть получается в функцию reinitPage() я Вписываю один раз какую-либо функцию? они будут срабатывать и на загрузке и на ресайзе ? А в в $(document).ready(function($){});

Я вписываю код функции?
А в reinitPage() ее вызов?

[Александр Маджугин]

Alibek Kulseitov, не каждый 5 сек, а каждые 200 ms, т.е. 5 раз в секунду.

Просто с Js-ом очень слабо дружу по этому обратился сюда, чтобы посоветовали что да как.

ну банально вот так попробуйте:

function equalNews() {
            if($(window).width() >= 992) {
                $('.equal-news__list').css('height', $('.equal-news__col').innerHeight());

                    if($('.equal-news__list').innerHeight() != $('.equal-news__col').innerHeight()) {
                        $('.equal-news__list').css('height', $('.equal-news__col').innerHeight());
                    }
            } else {
                $('.equal-news__list').css('height', 'auto');
            }
        }

не тестил конечно.

Я вписываю код функции?
А в reinitPage() ее вызов?

Наоборот - вы в событиях вызываете reinitPage, а все что хотели там вызывать в ее тело. Я же написал прямо кусок код. Но опять же без отладки ;)

[Alibek Kulseitov]

ну банально вот так попробуйте:

Сейчас попробую и отпишусь )

Наоборот - вы в событиях вызываете reinitPage, а все что хотели там вызывать в ее тело. Я же написал прямо кусок код. Но опять же без отладки ;)

В первые вижу чтобы использовали такую функцию но протестим тоже

[Alibek Kulseitov]

Александр Маджугин, Ваша функция сработала) но вот насчет reinitPage() нет.
Сделал вот такой код

(function ($) {
    "use strict";

    // document ready function
    $(document).ready(function($){

        /*
        |--------------------------------------------------------------------------
        | Equal Height
        |--------------------------------------------------------------------------
        */

        function equalNews() {
            if($(window).width() >= 992) {
                $('.equal-news__list').css('height', $('.equal-news__col').innerHeight());

                if($('.equal-news__list').innerHeight() != $('.equal-news__col').innerHeight()) {
                    $('.equal-news__list').css('height', $('.equal-news__col').innerHeight());
                }
            } else {
                $('.equal-news__list').css('height', 'auto');
            }
        }

    });

    function reinitPage() {

        // Call equalNews function when window object is loaded
        equalNews();
    }

    $(window).on('load',function(){reinitPage();});

    // window onresize
    $(window).resize(function(){reinitPage();});

}(jQuery));

Пишет что

scripts.js:30 Uncaught ReferenceError: equalNews is not defined
    at reinitPage (scripts.js:30)
    at scripts.js:33
    at dispatch (main.min.js:10)
    at v.handle (main.min.js:10)

[Александр Маджугин]

Она выполняется раньше чем будет объявлена equalNews.

1 Поместите весь кода в $(document).ready(function($){
2 Попробуйте так

$(window).on('load',reinitPage);
    // window onresize
    $(window).resize(reinitPage);