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

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 或 [=17 上的 '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;
}

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

How to disable a function on resize / orientationchange?

javascript

jquery

slick.js