使用局部变量从另一个函数停止setTime

时间:2018-02-19 08:09:24

标签: javascript timer settimeout local-variables clearinterval

感谢您的帮助! 这个的主要目标是停止计时器。但它不起作用。 我知道这不起作用,因为我从另一个函数调用一个局部变量但是如果我将变量声明为全局,则setTime会自动启动并且它不是我想要的。 如何解决它,或另一种选择?谢谢!! 这是我的代码:



var interval2;

function startTimef(){

    var startTime = Date.now();
    interval2 = setInterval(function() {
    var elapsedTime = Date.now() - startTime - 5000;
    document.getElementById("timer").innerHTML = (elapsedTime / 1000).toFixed(3);
    
}, 75);

}

function myStopFunction(interval2) {
    
    clearInterval(interval2); // does not work because interval2 is a local variable in StartTime.
    
 var result = document.getElementById("result");
    var score = document.getElementById("timer").textContent;

  if (score < -0.200) { result.innerHTML = score+" Almost there ";}
    if (score < -500 && score < -0.200) { result.innerHTML = "Almost there";}
    if (score > -0.200 && score < 0 ) { result.innerHTML = "No too bad mate";}
    if (score > -0.100 && score < 0.200 ) { result.innerHTML = "Perfect !!!";}
    if (score > 0.200 ) { result.innerHTML = "You need some work!";}
   
};

// Press Enter Keyboard 
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TimeOver</title>
</head>
<body>
<div class="main-box">
    <h2>Try to Stop the timer as close as possible to cero</h2>
    <p id="timer">0000</p>
    <button id="stop" onclick="myStopFunction()" >Stop time</button>
    <span id="result"></span>
    <button id="" onclick="startTimef()" >start</button>  
</div>
    <script src="main.js"></script>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

试试这个。从interval2删除myStopFunction(interval2)即可。 您的第一种方法不会因为您有2个interval2变量而JS将使用本地声明的interval2而不是外部interval2

var interval2;

function startTimef(){

    var startTime = Date.now();
    interval2 = setInterval(function() {
        var elapsedTime = Date.now() - startTime - 5000;
        document.getElementById("timer").innerHTML = (elapsedTime / 1000).toFixed(3);

    }, 75);
}

function myStopFunction() {
  clearInterval(interval2);
  var result = document.getElementById("result");
  var score = document.getElementById("timer").textContent;

  if (score < -0.200) { result.innerHTML = score+" Almost there ";}
    if (score < -500 && score < -0.200) { result.innerHTML = "Almost there";}
    if (score > -0.200 && score < 0 ) { result.innerHTML = "No too bad mate";}
    if (score > -0.100 && score < 0.200 ) { result.innerHTML = "Perfect !!!";}
    if (score > 0.200 ) { result.innerHTML = "You need some work!";}
   
};

// Press Enter Keyboard
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TimeOver</title>
</head>
<body>
<div class="main-box">
    <h2>Try to Stop the timer as close as possible to cero</h2>
    <p id="timer">0000</p>
    <button id="stop" onclick="myStopFunction()" >Stop time</button>
    <span id="result"></span>
    <button id="" onclick="startTimef()" >start</button>  
</div>
    <script src="main.js"></script>
</body>
</html>