Как отключить функцию изменения размера / ориентации?

Question

У меня есть вызов этой функции APP.utilities.anchor.scrollTo($(element).find('a'));, который прокручивается до элемента после события с именем afterChange. Я использую скользкую карусель и хочу отключить функцию scrollTo при изменении размера / ориентации или при событии afterChange.

Это то, что у меня есть

var reInitSlickOnResize = function () {
    $slickCarousel.slick('resize');
};

$(window).on('resize orientationchange', reInitSlickOnResize);

И у меня есть эта функция, где я вызываю функцию scrollTo:

var handleIsActiveClass = function() {
    $slickCarousel.on('afterChange', function (slick, currentSlide) {
        var currenSlideIndex = currentSlide.currentSlide;
        $tabs.each(function (producTabIndex, element) {
            if (currenSlideIndex === producTabIndex) {                    
                // trigger scroll to focus on proper element
                APP.utilities.anchor.scrollTo($(element).find('a')); 
            }
        });
    });
};

Проблема в том, что при изменении размера / ориентации автоматически запускается событие afterChange, поэтому я хотел бы знать, как отключить событие afterChange для события resize или orientationchange.

Answer 1

Если вы сделаете обработчик afterChange ссылочным с помощью именованной функции, то вы можете отсоединить событие afterChange перед вызовом .slick('resize') и повторно присоединить после.

function handleSlideChange(slick, currentSlide) {
  // ...
}

function handleIsActiveClass() {
  // Named function instead of anonymous function
  $slickCarousel.on('afterChange', handleSlideChange);
}

function reInitSlickOnResize() {
  $slickCarousel
    .off('afterChange', handleSlideChange)
    .slick('resize')
    .on('afterChange', handleSlideChange);
}

$(window).on('resize orientationchange', reInitSlickOnResize);

Другой подход заключается в использовании флага для подавления поведения:

var isResizing = false;

function handleIsActiveClass() {
  $slickCarousel.on('afterChange', function (slick, currentSlide) {
    if (isResizing) {
      return;
    }

    // ...
  });
}

function reInitSlickOnResize() {
  isResizing = true;
  $slickCarousel.slick('resize');
  isResizing = false;
}