SetInterval 在滑动时重置答案

【问题标题】：SetInterval reset on swipeSetInterval 在滑动时重置
【发布时间】：2018-02-22 10:45:13
【问题描述】：

所以我试图在“Superslides”滑块中添加一个进度条。我使用 setInverval 在幻灯片完成动画时触发它，并且在大多数情况下它可以工作。

如果有人单击滑块上的一个链接（下一张幻灯片、上一张或分页），我还添加了一些重置间隔，并且这也可以使用，但是滑块使用hammer.js 和当我尝试时具有触摸支持在滑动事件之后做同样的事情，它似乎没有正确重置。它将进度条的宽度重置为 0，但尽管尝试清除它，但间隔仍在继续。

我可能在做一些相当愚蠢的事情，但我一直在摸不着头脑，所以我想我会问我做错了什么。

$(document).on('animated.slides', function() {
      var progressBar = $('#progress-bar');
      width = 0;

      progressBar.width(width);

      var interval = setInterval(function() {

          width += 1;

          progressBar.css('width', width + '%');

          if (width >= 100) {
              clearInterval(interval);
          }

         //Trying to reset on swipe (I've also tried putting this below outside of interval

         Hammer($slides[0]).on("swipeleft swiperight", function(e) {
         width = 0;
          clearInterval(interval); 

        });


      }, 160);

      //reset on anchor click
      $("#slides a").click(function(){
        clearInterval(interval);

      });

  });

【问题讨论】：

标签： javascript jquery slider setinterval hammer.js

【解决方案1】：

我相信我自己解决了这个问题。滑块的实现使用 $slides 作为“#slider”的变量，然后使用它来触发滑动动画。我按原样复制并粘贴到我的区间函数中。当我使用 id 而不是变量时，它似乎起作用了。

【讨论】：