为什么切换一次setInterval（）来更改图像源，却只减少每次切换后的间隔时间？

Question

I tried to toggle the setInterval() function by clicking on an image. 我试图通过单击图像来切换setInterval()函数。 On first click it will start to change the image with a time interval that we set. 第一次单击时，它将开始以我们设置的时间间隔更改图像。 But after the second click the setInterval() function is not being stopped (which I wanted), instead the interval reduces. 但是在第二次单击后， setInterval()函数并未停止（这是我想要的），而是缩短了间隔。 And the interval keep on reducing after each click. 并且每次点击后间隔不断减小。 Which means it is not toggling properly. 这意味着它没有正确切换。 Here is the code: 这是代码：

<!DOCTYPE html>
<html>
<head>
<title>Learning JavaScript</title>
<script type="text/javascript">
var settimer;
var stop;

function change_timer(){
    if(settimer==="on"){
        clearInterval(stop);                 
        var settimer="off";
       }
    else{
         var stop=setInterval('change()',2000);
         var settimer="on";
       }
    }

function change(){
    var img=document.getElementById('browser');             
    if(img.src==="http://localhost:8383/JavaScript/firefox.jpg")               
      {img.src="chrome.jpg";}    
      else{img.src="firefox.jpg";}
    }
</script>
</head>
<body>
<img src="firefox.jpg" alt='browser' id='browser' onclick='change_timer();'>
<p>Click on image to set timer on or off</p> 
</body>
</html>

Answer 1

Here's a working example for your problem 这是您的问题的有效示例

 var settimernow="off"; var stop; function change_timer(){ if(settimernow==="on"){ clearInterval(stop); settimernow="off"; } else{ stop=setInterval('change()',2000); settimernow="on"; } } function change(){ var img=document.getElementById('browser'); if(img.src==="https://www.w3schools.com/css/trolltunga.jpg") { img.src="http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg"; } else { img.src="https://www.w3schools.com/css/trolltunga.jpg"; } }

 <body> <img src="http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg" alt='browser' id='browser' width="100px" height="100px" onclick='change_timer();'> <p>Click on image to set timer on or off</p> </body>

Answer 2

This line 这条线

var stop=setInterval('change()',2000);

... creates a new, locally scoped variable stop instead of assigning to the one you created in the outer scope, so when you later run clearInterval(stop) (in a new 'instance' of the function with a new scope) you're not clearing the interval you created previously. ...创建一个新的局部范围的变量stop而不是分配给在外部范围内创建的变量stop ，因此，当您稍后运行clearInterval(stop) （在具有新范围的函数的新“实例”中）时，不要清除您之前创建的间隔。

The same goes for the settimer variable. settimer变量也是settimer 。

Simply remove the var keyword from those lines in the change_timer() function and it will work as intended. 只需从change_timer()函数中的那些行中删除var关键字，它就会按预期工作。

为什么切换一次setInterval（）来更改图像源，却只减少每次切换后的间隔时间？

问题描述

2 个解决方案

解决方案1
1 2017-06-15 10:56:23

解决方案2
1 已采纳 2017-06-15 11:06:40

为什么切换一次setInterval（）来更改图像源，却只减少每次切换后的间隔时间？

问题描述

2 个解决方案

解决方案1 1 2017-06-15 10:56:23

解决方案2 1 已采纳 2017-06-15 11:06:40

解决方案1
1 2017-06-15 10:56:23

解决方案2
1 已采纳 2017-06-15 11:06:40