Question

你可以看到我有一个停止按钮，但是代码不正确，因为按下那个按钮时脚本不会停止，所以我该怎么办？我是否有可能当我按下停止时它会在我按下停止时停止，当我再次按下启动按钮时它会再次停止？

<!DOCTYPE html>
<html>

<head>
  <link href="style2.css" type="text/css" rel="stylesheet">
</head>

<body>

  <button onclick="timedText()">Start</button>

  <button onclick="clearTimeout(timeout)">Stop</button>


  <div id="leser">
    <iframe src="https://opskins.com/?loc=good_deals&sort=n&app=433850_1"></iframe>
  </div>

  <div id="leser2">
    <iframe src="https://opskins.com/?loc=good_deals&sort=n&app=433850_1"></iframe>
  </div>

  <script>
    var timeout;
    function timedText() {
       timeout = setTimeout(myTimeout1, 5000) 
       timeout = setTimeout(myTimeout2, 10000) 
       timeout = setTimeout(myTimeout3, 15000) 
}

 function stopTimeout() {
   clearTimeout(timeout);
 }
 function myTimeout1() {
   document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Flaming+Skull+Face+Bandana%22"></iframe>';;
}
 function myTimeout2() {
   document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=Skin%3A+Pinstripe+Suit+Jacket"></iframe>';
}
 function myTimeout3() {
   document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Pinstripe+Slacks%22"></iframe>';
}
  </script>

</body>

</html>

Answer 1

调用clearInterval需要清除预定的setInterval结果。您正在使用setTimeout。不同之处在于，使用setInterval设置的间隔将在特定延迟时反复调用，直到停止为止。但是，setTimeout只会被称为一次。

要取消超时或间隔，首先需要能够引用它。这可以通过将变量设置为超时的返回值来完成，例如：

var someTimeout = setTimeout(someFunction, 10000);

为了清除此超时，您可以转到：

clearTimeout(someTimeout);

因此，您必须从setTimeout获取返回值，以便稍后停止 - 您可以将返回值传递给clearTimeout。

以下是启动和停止超时所需的JS代码的完整工作示例：

var timeout;
function startTimeout() {
  // Set a timeout for 10 seconds from now and store it in `timeout`.
  timeout = setTimeout(callbackFunc, 10000);
}

function stopTimeout() {
  // Clear the timeout stored in `timeout`.
  clearTimeout(timeout);
}

// This function is called when the timeout happens.
function callbackFunc() {
  alert("Timeout has been triggered!");
}

这是你的代码，适合正常工作（虽然我建议你自己使用上面给出的信息来解决它，它已经绰绰有余了，你实际上就是这样学习的。）：

<!DOCTYPE html>
<html>

<head>
  <link href="style2.css" type="text/css" rel="stylesheet">
</head>

<body>

  <button onclick="timedText()">Start</button>

  <button onclick="clearInterval(setTimeout)">Stop time</button>


  <div id="leser">
    <iframe src="https://opskins.com/?loc=good_deals&sort=n&app=433850_1"></iframe>
  </div>

  <div id="leser2">
    <iframe src="https://opskins.com/?loc=good_deals&sort=n&app=433850_1"></iframe>
  </div>

  <script>
    var timeoutOne, timeoutTwo, timeoutThree;
    function timedText() {
       timeoutOne = setTimeout(myTimeout1, 5000) 
       timeoutTwo = setTimeout(myTimeout2, 10000) 
       timeoutThree = setTimeout(myTimeout3, 15000) 
}

 function stopTimeout() {
   clearTimeout(timeoutOne);
   clearTimeout(timeoutTwo);
   clearTimeout(timeoutThree);
 }
 function myTimeout1() {
   document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Flaming+Skull+Face+Bandana%22"></iframe>';;
}
 function myTimeout2() {
   document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=Skin%3A+Pinstripe+Suit+Jacket"></iframe>';
}
 function myTimeout3() {
   document.getElementById("leser").innerHTML = '<iframe src="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Pinstripe+Slacks%22"></iframe>';
}
  </script>    
</body>
</html>

如何停止时间激活的功能

1 个答案: