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

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

编辑：

奇怪，但看起来完全没有结合：

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

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

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

编辑：

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

EDIT2：

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可以解决这个问题：调整大小时调整resize事件的次数很多。如果你在resize回调中使用一个计时器，它会在每次调用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();
});

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

1 个答案: