javascript - 如何禁用调整大小/方向更改的功能？

Question

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

问题是当resize/orientationchange 发生时，它会自动触发'afterChange' 事件，所以我想知道如何在resize 上禁用'afterChange' 事件。或 orientationchange事件。

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