Javascript 为什么切换更改图像源的setInterval（）只会减少每次切换后的间隔时间？_Javascript_Html

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

javascript html

Javascript 为什么切换更改图像源的setInterval（）只会减少每次切换后的间隔时间？,javascript,html,Javascript,Html,我试图通过单击图像来切换setInterval（）函数。在第一次单击时，它将以我们设置的时间间隔开始更改图像。但是在第二次单击后，setInterval（）函数并没有停止（这是我想要的），而是间隔缩短了。每次点击后，间隔会不断缩短。这意味着它没有正确切换。代码如下： <!DOCTYPE html> <html> <head> <title>Learning JavaScript</title> <script type="tex

我试图通过单击图像来切换

setInterval（）

函数。在第一次单击时，它将以我们设置的时间间隔开始更改图像。但是在第二次单击后，

setInterval（）

函数并没有停止（这是我想要的），而是间隔缩短了。每次点击后，间隔会不断缩短。这意味着它没有正确切换。代码如下：

<!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>


学习JavaScript
var设定定时器；
var停止；
函数更改\u计时器（）{
如果（设置计时器==“打开”）{
清除间隔（停止）；
var settimer=“关闭”；
}
否则{
var stop=setInterval（'change（）'，2000）；
var settimer=“on”；
}
}
函数更改（）{
var img=document.getElementById（'browser'）；
如果（img.src==”http://localhost:8383/JavaScript/firefox.jpg")               
{img.src=“chrome.jpg”；}
else{img.src=“firefox.jpg”；}
}
单击图像以打开或关闭计时器

下面是一个解决您问题的有效示例

var settimernow=“off”；
var停止；
函数更改\u计时器（）{
如果（settimernow==“打开”）{
清除间隔（停止）；
settimernow=“关闭”；
}
否则{
停止=设置间隔（'change（）'，2000）；
settimernow=“on”；
}
}
函数更改（）{
var img=document.getElementById（'browser'）；
如果（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";
}    
其他的
{
img.src=”https://www.w3schools.com/css/trolltunga.jpg";
}
}


单击图像以打开或关闭计时器

这一行

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

。。。创建一个新的局部作用域变量

stop

，而不是分配给您在外部作用域中创建的变量，因此当您以后运行

clearInterval（stop）

（在具有新作用域的函数的新“实例”中）时，您不会清除以前创建的间隔

settimer

变量也是如此

只需从

change\u timer（）

函数中的那些行中删除

var

关键字，它就会按预期工作。

从代码片段中，看起来您每次都在声明一个新的本地版本的“stop”和“settimer”变量，因此全局“stop”和“settimer”变量永远不会被分配到…您正在“隐藏”全局作用域的

settimer

和

stop

变量与

change\u timer

函数（）中的变量一致。我想这就是问题所在。我只是一个javascript高手。每次都不必要地声明变量。