javascript - 如何通过函数调用停止 slider ？

Question

我试图让 slider 在用户单击下一个箭头时立即停止自动滑动。当用户点击下一个 slider 时， slider 应该停止并完全暂停。

我将所有 slider 代码放入一个名为 dontRun 的函数中。我最初将它设置为 dontRun(1) 以便它在加载页面时满足条件和 slider 功能。用户单击下一个箭头后，我让它转到函数 dontRun(0)，该函数应将自动播放设置为较慢的数量，以便它不再自动滑动。

问题是当 dontRun(0) 工作时，它没有访问自动播放功能，也没有停止 slider 。

如何解决这个问题？

function dontRun(value){

if(value === 1) {
var wallopEl = document.querySelector('.Wallop');
var wallop = new Wallop(wallopEl);

// To start Autoplay, just call the function below
// and pass in the number of seconds as interval
// if you want to start autoplay after a while
// you can wrap this in a setTimeout(); function
autoplay(5000);

// This a a helper function to build a simple
// auto-play functionality.
function autoplay(interval) {

  var lastTime = 0;

  function frame(timestamp) {
    var update = timestamp - lastTime >= interval;

    if (update) {
      wallop.next();
      lastTime = timestamp;
    }

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
    };
  }//if

  else if (value === 0){
    alert("This slider should not be auto updating anymore.");
    autoplay(50000000000);

  }
}// end of function


dontRun(1);

$(".Next").click(function(){
dontRun(0);
})

Answer 1

由于其可访问性，无法调用您的自动播放功能。需要把函数去掉，在dontRun方法之前加上。

function autoplay(interval) {
   console.log('called');
};

function dontRun(value){
    autoplay(5000);
    // logic
}

function autoplay(interval) {
  console.log('called');
  var lastTime = 0;

  function frame(timestamp) {
    var update = timestamp - lastTime >= interval;

    if (update) {
      wallop.next();
      lastTime = timestamp;
    }

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
};

function dontRun(value) {

  if (value === 1) {
    var wallopEl = document.querySelector('.Wallop');
    var wallop = new Wallop(wallopEl);

    // To start Autoplay, just call the function below
    // and pass in the number of seconds as interval
    // if you want to start autoplay after a while
    // you can wrap this in a setTimeout(); function
    autoplay(5000);

    // This a a helper function to build a simple
    // auto-play functionality.

  } //if
  else if (value === 0) {
    alert("This slider should not be auto updating anymore.");
    autoplay(50000000000);
  }
} // end of function

//dontRun(0);

function clickMe() {
  console.log('clicked');
  dontRun(0);
}

#btntag {
  width: 100px;
  height: 50px;
}

<button onclick="clickMe()" id="btntag">click</button>