javascript - 在视口(viewport)调整大小时完全解除 Jquery 插件与 DOM 的绑定(bind)

Question

我的图像有一个光滑的 slider :

// Slick slider - Responsive
$(window).on('resize', function() {
  if ($(this).width() > 1600) {
    $('.images').slick({
      dots: false,
      infinite: true,
      speed: 300,
      slidesToShow: 20, // Set at least half of all slides
      centerMode: true,
      initialSlide: 0, // Fix for centerMode with 1
      variableWidth: true,

      arrows: true,
      draggable: true,
      swipeToSlide: true,
      slidesToScroll: 1,
      autoplay: false,
      autoplaySpeed: 3000
    });
  }
  else {
    $('.images').unbind(slick());
  };
});
$(document).ready(function() {
  $(window).resize();
});

如果我使用小于 1600px 的视口(viewport)刷新页面(大尺寸仅用于演示目的)， slider 不会变为事件状态，效果很好。但是，如果我将浏览器的宽度更改为大于 1600 像素，然后将其更改回小于 1600 像素，则 slider 的代码将保留。我使用了 slick slider 的内置响应标志和 unslick 功能，但问题和这里一样:没有完全清理它的代码。

如何完全删除它的代码而不刷新，仅改变视口(viewport)大小？

编辑:

奇怪，但看起来完全解除绑定(bind):

else {
  $('.images').slick('unslick');
};

但是文档建议的方式不是，只是部分:

responsive: [
  {
    breakpoint: 1600,
    settings: 'unslick'
  }

编辑:

虽然文档建议也将其删除，但当浏览器的视口(viewport)大小达到其应处于事件状态时不会重新绑定(bind)。

编辑2:

THiCE 的解决方案修改为仅使用计时器来调整大小事件。这样我就不会因为 .slick('unslick'); hack:

在加载时出现任何控制台错误

$(document).ready(function() {
  $(window).on('load', function() {
    handleSlick();
    console.log('handleSlick() fired on load...');
  });
  var timer;
  $(window).on('resize', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      handleSlick();
      console.log('handleSlick() fired on resize...');
    }, 100);
    //console.log('jquery on window resize');
  });
  //handleSlick();
});

Answer 1

有时使用 setTimeout 可以达到目的:在调整大小期间会多次触发调整大小事件。 如果您在调整大小回调中使用计时器，该计时器在每次调整大小事件触发时都会重置并启动，则可以防止这些“双重”触发。

针对您的情况的示例:

  // Slick slider - Responsive
function bindSlick() {
  $('.images').slick({
    dots: false,
    infinite: true,
    // etc...
  });
}

function unbindSlick() {
  $('.images').slick('unslick');
}

function handleSlick() {
  if ($(window).width() > 1600) {
    bindSlick();
  } else {
    unbindSlick(); 
  }
}

$(document).ready(function() {
  var timer;
  $(window).on('resize', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      handleSlick();  
    }, 100);
  });
  handleSlick();
});