如何禁用調整大小/方向改變的功能？

Question

我有這個函數調用APP.utilities.anchor.scrollTo($(element).find('a')); 在名為afterChange的事件之后滾動到元素。 我正在使用光滑的輪播，我想在調整大小/方向改變或afterChange事件上禁用scrollTo功能。

這就是我所擁有的

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

問題是當 resize /orientationchange 發生時，它會自動觸發 'afterChange' 事件，所以我想知道如何在resize或orientationchange事件上禁用'afterChange' 事件。

Answer 1

如果您使用命名函數使afterChange處理程序可引用，則您可以在調用.slick('resize')之前分離afterChange事件，然后重新附加。

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