Javascript/Jquery——简单定时器的多种实现方法

定时器是JavaScript编程中常用的一个功能，用于定时执行一些任务。本文将介绍JavaScript和JQuery中简单定时器的多种实现方法。

JavaScript定时器

setInterval()

setInterval() 方法可按照指定周期多次地调用函数或代码片段。语法如下：

var intervalID = setInterval(func, delay)

其中，func 参数是要执行的函数，delay 参数是每次执行函数的时间间隔（以毫秒为单位）。例如，下面的代码会每隔1秒输出一次 "Hello World!"：

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

需要注意的是，setInterval() 方法会定期执行指定的函数，直到 clearInterval() 被调用为止。

setTimeout()

setTimeout() 方法只执行一次指定的函数，它在等待指定的毫秒数之后执行。语法如下：

var timeoutID = setTimeout(func, delay)

其中，func 参数是要执行的函数，delay 参数是执行函数的等待时间（以毫秒为单位）。

例如，下面的代码会在等待5秒后输出 "Hello World!"：

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

clearInterval() 和 clearTimeout()

上述的两个方法都可以返回一个唯一的标识符，用于停止正在进行的定时器。调用 clearInterval() 来停止 setInterval()，调用 clearTimeout() 来停止 setTimeout()。

例如，下面的示例中我们使用 setInterval() 方法每隔1秒输出一次数字，到达10时停止输出：

var i = 0;
var intervalID = setInterval(function(){
    console.log(i);
    i++;
    if (i === 10) {
        clearInterval(intervalID);
    }
}, 1000);

Jquery定时器

setInterval()

与JavaScript中的 setInterval() 方法相同，Jquery也提供了 setInterval() 函数。它的语法与JavaScript相似：

var intervalID = setInterval(function(){
    // your code here
}, delay);

例如，下面的代码每隔1秒向一个元素中追加一次 "Hello World!"：

var intervalID = setInterval(function(){
    $("#myDiv").append("Hello World!<br>");
}, 1000);

setTimeout()

例如，下面的代码会在等待5秒后隐藏一个元素：

setTimeout(function(){
    $("#myDiv").hide();
}, 5000);

需要注意的是，在JQuery中，即使你只需要设置一个时间单元，也必须显式地给出时间单位。

总结

本文介绍了JavaScript和JQuery中的简单定时器的多种实现方法。需要注意的是，在使用定时器时一定要小心，不然可能会导致浏览器或电脑系统出现问题。如果你需要使用定时器功能，请务必在确保代码正确且可靠的情况下使用。