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

我试图通过单击图像来切换setInterval()函数。首先点击它将开始改变我们设置的时间间隔的图像。但第二次点击后，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>

来源

2017-06-15 Adeeb Abdul Salam

从代码片段看来，您似乎每次都声明一个新的本地版本的“stop”和“settimer”变量，所以全局的“stop”和“settimer”变量永远不会被分配到... –

您'使用'change_timer'函数（https://stackoverflow.com/questions/5373278/variable-shadowing-in-javascript） – Andreas

谢谢，将全局作用域的'settimer'和'stop'变量隐藏起来。我认为这是问题。我只是javascript中的noob。每次都不必要地声明变量。 –

此行

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

工作示例...创建一个新的本地变量stop代替分配给你在外部范围创建的那个，所以当你以后运行clearInterval(stop)（在一个新的'实例'与新范围的函数）你没有清除你以前创建的时间间隔。

settimer变量也是如此。

只需从change_timer()函数中的这些行中删除var关键字，它将按预期工作。

来源

2017-06-15 11:06:40

这里对您的问题

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>

来源

2017-06-15 10:56:23 Raj

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

回答

相关问题