在视口调整大小时完全从 DOM 解绑 Jquery 插件

Question

我有一个光滑的图像滑块：

// 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 的视口刷新页面（大尺寸仅用于演示目的），滑块不会变为活动状态，效果很好。但是，如果我将浏览器的宽度更改为大于 1600 像素并将其更改回小于 1600 像素，滑块的代码将保留。我使用了光滑滑块的内置响应标志和unslick功能，但问题和这里一样：没有完全清理它的代码。

如何在不刷新的情况下完全删除它的代码，仅通过视口大小更改？

编辑：

奇怪，但看起来像是完全解除绑定：

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

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

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

编辑：

尽管文档也建议删除它，但是当浏览器的视口大小达到它应该处于活动状态的位置时，不会重新绑定。

编辑2：

THiCE的解决方案修改为仅使用计时器进行调整大小事件。这样，我就不会因为黑客而加载时收到任何控制台错误.slick('unslick');：

$(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 可以解决问题：在调整大小期间会多次触发 resize 事件。如果在每次触发调整大小事件时重置并启动的调整大小回调中使用计时器，则可以防止这些"双重"触发。

举个例子，对于您的情况：

  // 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();
});