Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScript clearTimeout（）＆clearInterval（）メソッド

clearTimeout（）メソッドは、setTimeout（）関数によって以前に設定されたタイムアウトをクリアします。 clearInterval（）メソッドは、setInterval（）関数によって以前に設定された間隔をクリアします。

以下は、clearTimeout（）およびclearInterval（）メソッドのコードです-

例

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .timeout {
      margin-right: 170px;
      display: inline-block;
      width: 200px;
      height: 200px;
   }
   .interval {
      display: inline-block;
      width: 200px;
      height: 200px;
   }
   .stopTimeout {
      margin-right: 100px;
   }
</style>
</head>
<body>
<h1>clearTimeout() & clearInterval() Method</h1>
<div class="timeout" style="background-color: blue;"></div>
<div class="interval" style="background-color: blue;"></div>
<br />
<button class="startTimeout" onclick="startTimeout()">START TIMEOUT</button>
<button class="stopTimeout" onclick="stopTimeout()">STOP TIMEOUT</button>
<button class="startInterval" onclick="startInterval()">
START INTERVAL
</button>
<button class="stopInterval" onclick="stopInterval()">STOP INTERVAL</button>
<div class="resultInterval"></div>
<div class="resultTimeout"></div>
<script>
   let resInterval = document.querySelector(".resultInterval");
   let resTimeout = document.querySelector(".resultTimeout");
   function changeColor(ele) {
      if (ele.style.backgroundColor == "blue") {
         ele.style.backgroundColor = "red";
      } else {
         ele.style.backgroundColor = "blue";
      }
   }
   let timeout;
   function startTimeout() {
      timeout = setTimeout(
      changeColor.bind(this, document.querySelector(".timeout")),
      1500
   );
   resTimeout.innerHTML = "Timeout has been started";
}
function stopTimeout() {
   clearTimeout(timeout);
   resTimeout.innerHTML = "Timeout has been cleared";
}
let interval;
function startInterval() {
   interval = setInterval(
      changeColor.bind(this, document.querySelector(".interval")),
      1500
   );
   resInterval.innerHTML = "Interval has been started";
}
function stopInterval() {
   clearInterval(interval);
   resInterval.innerHTML = "Interval has been cleared";
}
</script>
</body>
</html>

出力

JavaScript clearTimeout（）＆clearInterval（）メソッド

「STARTTIMEOUT」ボタンと「STARTINTERVAL」ボタンをクリックして数秒待つと-

JavaScript clearTimeout（）＆clearInterval（）メソッド

「STOPTIMEOUT」と「STOPINTERVAL」ボタンをクリックすると-

JavaScript clearTimeout（）＆clearInterval（）メソッド


  1. JavaScriptのSort（）メソッド

    JavaScriptのsort（）メソッドは、配列のソートに使用されます。並べ替えの順序は、アルファベット、数字、昇順、降順のいずれかです。 以下は、sort（）メソッドのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&

  2. JavaScriptのObject.fromEntries（）メソッド。

    JavaScriptのObject.fromEntries（）メソッドは、配列のように反復可能なマップを変換するために使用され、キーと値のペアを持つマップをオブジェクトに変換します。 以下は、Object.fromEntries（）メソッドのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devic