如何将Debounce与条件语句一起使用？

Question

我有一个基于$(window).width的if / else条件语句，该条件语句包装在Drupal 8 debounce function中。这里的想法是考虑当用户旋转设备时在条件中定义的2个视口尺寸之间转换的设备。

应该发生的是，如果窗口大于767px，则执行添加/删除类方法，否则执行add slideToggle和添加/删除类方法。

问题在于，当反跳触发时，页面大小调整时似乎会调用任一条件的方法。我对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));