代码之家  ›  专栏  ›  技术社区  ›  Non

如何禁用resize/orientationchange上的函数?

  •  1
  • Non  · 技术社区  · 6 年前

    APP.utilities.anchor.scrollTo($(element).find('a')); 在一个名为 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 事件。

    1 回复  |  直到 4 年前
        1
  •  1
  •   Jacob    6 年前

    如果你成功了 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;
    }