Question

我制作了幻灯片（function slide()）：我想在点击“播放”时启动此功能点击“暂停”时暂停。我使用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

这是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>

这种方法的优点是：

不会使用变量污染全局范围
此模式允许脚本的语法更加一致。它还使模块的最后更清楚我们的哪个功能和变量可以公开访问，这样可以轻松实现可读性。

Answer 2

这是因为在停止功能中未定义“test”。为了使您的代码有效，您可以将“test”变量设为全局变量，如下所示： -

var test = null;

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

Answer 3

您的问题是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>

设置后无法清除间隔？

3 个答案: