一、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中,通过设置定时器可以轻松实现。
<script> 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); </script>