如何在resize / orientationchange上禁用一个函数？

Question

我有这个函数调用APP.utilities.anchor.scrollTo($(element).find('a'));，它在一个名为afterChange的事件之后滚动到一个元素。我正在使用光滑的旋转木马，我想在resize / orientationchange或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'事件，所以我想知道如何在resize或orientationchange事件中禁用'afterChange'事件。

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;
}