Как использовать Debounce вместе с условным оператором? - PullRequest
0 голосов
/ 02 декабря 2018

У меня есть условный оператор if / else, основанный на $(window).width, который обернут в функцию отладки Drupal 8 .Идея здесь состоит в том, чтобы учесть устройства, которые переходят между двумя размерами области просмотра, определенными в условном выражении, когда пользователь поворачивает свое устройство.

Что должно произойти, если окно с размером выше 767px, метод добавления / удаления классоввыполняется, в противном случае добавляются методы slideToggle и методы добавления / удаления классов.

Проблема заключается в том, что в то время как запускается debounce, методы из любого условного выражения вызываются при изменении размера страницы.Насколько я понимаю, в Debounce следует изменить размер страницы в условном коде.Обратите внимание, что при обновлении страницы код выполняется так, как ожидается.

(function($) {
  'use strict';
  Drupal.globalInit = {
      init: false,
  };

  Drupal.behaviors.resizeEvent = {
      attach: function(context, settings) {

        var updatePageElements = function() {
          var windowWith = $(window).width();

          // Tabs
          if ($(window).width() > 767) {
            // Show/ hide text .tabs__text
            $('.tabs__tab:first').addClass('js-active');
            $('.tabs__tab').once().on('click', function() {
              $('.tabs__tab').removeClass('js-active');
              $(this).addClass('js-active');
            });

            console.log('greater than 767: ', windowWith)
          }
          else if ($(window).width() <= 767) {
            $('.tabs__tab').removeClass('js-active active');
            $('.tabs__inner').css('height', 'auto');

            $('.tabs__title').once().on('click', function() {
              $(this).
              parent().
              toggleClass('active').
              find('.tabs__text').
              slideToggle('fast');
              $('.tabs__title').
              not(this).
              parent().
              removeClass('active').
              find('.tabs__text').
              slideUp();
            });
            console.log('less than 768: ', windowWith)
          }
        };

      if (!Drupal.globalInit.init) {
          // Initial page call.
          updatePageElements();

          // Bind on every resize.
          $(window).
          on('resize', Drupal.debounce(updatePageElements, 250));

          Drupal.globalInit.init = true;
      }
    }
  };

}(jQuery));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...