js定時器詳解

一、setInterval定時器

setInterval（函數，毫秒）

setInterval函數會按照給定的時間間隔無限次數地調用指定的函數。

    setInterval(function () {
        console.log("Hello World");
    }, 1000);

上述代碼會每隔1000毫秒（即1秒）輸出一次”Hello World”。

setInterval函數返回一個唯一的定時器ID，可以使用clearInterval函數來停止定時器。

    var intervalID = setInterval(function () {
        console.log("Hello World");
    }, 1000);

    clearInterval(intervalID);

上述代碼開始執行定時器，並將返回的ID存儲在變數intervalID中。調用clearInterval（intervalID）函數會停止定時器。

二、setTimeout定時器

setTimeout（函數，毫秒）

setTimeout函數會在指定的時間後調用指定的函數。

    setTimeout(function () {
        console.log("Hello World");
    }, 1000);

上述代碼會在1000毫秒（即1秒）後輸出”Hello World”。

setTimeout函數返回一個唯一的定時器ID，可以使用clearTimeout函數來停止定時器。

    var timeoutID = setTimeout(function () {
        console.log("Hello World");
    }, 1000);

    clearTimeout(timeoutID);

上述代碼開始執行定時器，並將返回的ID存儲在變數timeoutID中。調用clearTimeout(timeoutID)函數會停止定時器。

三、使用定時器實現輪播圖

輪播圖廣泛應用於網站和移動APP中，通過設置定時器可以輕鬆實現。

 .slide {
 width: 300px;
 height: 200px;
 overflow: hidden;
 }
 .slide ul {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 height: 100%;
 width: 300%;
 position: relative;
 left: 0px;
 }
 .slide li {
 float: left;
 width: 33.33%;
 height: 100%;
 }
 function prev() {
 var ul = document.getElementById("slide");
 ul.style.left = "-100%";
 }
 function next() {
 var ul = document.getElementById("slide");
 ul.style.left = "0px";
 }
 setInterval(function () {
 var ul = document.getElementById("slide");
 if (ul.style.left == "0px") {
 ul.style.left = "-100%";
 } else {
 ul.style.left = "0px";
 }
 }, 3000);



原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/190993.html