设置后无法清除间隔？

Question

我创建了一个幻灯片（function slide()）：我希望此功能在单击 'play' 时启动并在点击 'pause' 时暂停。我用了 setinterval 它有效，只有 clearinterval 拒绝工作，我做错了什么？

<div id='play' onclick='play()'><img src='image1/fleche.png'></div>
<div id='pause' onclick='stop()'><img src='image1/break.png'></div>

function play(){
    var test = setInterval(slide,500);}
function stop(){
    clearInterval(test);}

Answer 1

因为"test"在stop函数中没有定义。为了使您的代码正常工作，您可以将 "test" 变量设置为全局变量，如下所示：-

var test = null;

function play(){
    test = setInterval(slide,500);}
function stop(){
    clearInterval(test);}

Answer 2

你的问题是 test 是一个在 play() 中声明的变量，它只存在于那个函数中。你必须在外面声明它：

var test;
function play(){
    test = setInterval(function(){
 console.log("hello")
 },500);
}
function stop(){
    clearInterval(test);
}

<button onclick="play()">play</button>
<button onclick="stop()">stop</button>

Answer 3

这是 Revealing module pattern 的经典用例：

var mySlideShow = (function () {
    var intervalHolder;

    //this is private to the closure
    var slide = function(){
          //whatever slide does?
    }

    function play(){
      intervalHolder = setInterval(slide,500);
    }

    function stop(){
           clearInterval(intervalHolder);
     }

    return{
      play:play,
      stop:stop
    };
})();

这样称呼它：

<div id='play' onclick='mySlideShow.play()'><img src='image1/fleche.png'></div>
<div id='pause' onclick='mySlideShow.stop()'><img src='image1/break.png'></div>

这种方法的优点是：

不使用变量污染全局范围
This pattern allows the syntax of our scripts to be more consistent. It also makes it more clear at the end of the module which of our functions and variables may be accessed publicly which eases readability.

设置后无法清除间隔？

Unable to Clearinterval after set?

javascript

slideshow

setinterval

clearinterval