Jquery中使用setInterval和setTimeout的方法

下面是详细讲解 “JQuery中使用setInterval和setTimeout的方法”的完整攻略。

setInterval 和 setTimeout 的基本概念

setInterval() 和 setTimeout() 都是 JavaScript 中的定时器函数，它们都用于在指定的时间间隔内执行某个函数。

setInterval() 方法会在某个固定的时间间隔内重复执行某个函数或者代码片段。

setTimeout() 方法会在指定的时间后执行某个函数或者代码片段。

setInterval 的使用方法

setInterval() 方法的语法为

setInterval(function, milliseconds)

其中 function 是要执行的函数、代码片段，milliseconds 是时间间隔，单位为毫秒。

例如，我们使用 setInterval() 实现每 1 秒钟在控制台输出一次“Hello World”这个字符串。

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

这样，Hello World 字符串就会每隔 1 秒钟在控制台输出一次。

clearInterval 的使用方法

setInterval() 方法返回值是一个 ID，可以使用 clearInterval() 方法来停止 setInterval() 方法执行的代码。

clearInterval() 方法使用起来非常简单，只需要传入 setInterval() 返回的 ID 作为参数即可，如下所示：

const intervalId = setInterval(function() {
  console.log("Hello World")
}, 1000)

clearInterval(intervalId)

在上述示例中，我们可以看到 setInterval() 的返回值被保存在了 intervalId 这个变量中，传入 intervalId 给 clearInterval() 就可以停止 setInterval() 执行的代码。

setTimeout 的使用方法

setTimeout() 方法的语法为

setTimeout(function, milliseconds)

其中 function 是要执行的函数、代码片段，milliseconds 是延时时间，单位为毫秒。

例如，我们使用 setTimeout() 实现延时 2 秒钟后在控制台输出“Hello World”这个字符串。

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

这样，2 秒钟后就会在控制台输出一次 “Hello World” 字符串。

使用 setInterval 和 setTimeout 实现间歇性调用

书写延时执行某个函数的代码是很常见的，但有时我们需要在一个事件触发后或者某个函数调用后，间歇性地调用某个函数，这就要用到 setInterval() 函数了。

例如，我们使用 setInterval() 实现每隔 2 秒钟调用一次 sayHello() 函数。

function sayHello() {
    console.log("Hello World")
}

const intervalId = setInterval(sayHello, 2000)

这样，sayHello() 函数就会在每隔 2 秒钟被调用一次。使用同样的方式停止 setInterval() 的执行：

clearInterval(intervalId)

上述例子，我们每隔一段时间（2秒）调用一次函数，如果我们想要在调用完一次sayHello()函数后延时执行，我们就可以使用 setTimeout() 函数实现。

例如，我们使用 setTimeout() 实现每隔 2 秒钟调用一次 sayHello() 函数。

function sayHello() {
    console.log("Hello World")
}

function intervalFunc() {
  setTimeout(intervalFunc, 2000)
  sayHello()
}

intervalFunc();

这样，sayHello() 函数就会在每隔 2 秒钟被调用一次，且每次调用之间间隔 2 秒钟时间。

在上述例子中，我们定义了一个名为 intervalFunc() 的函数，该函数内部先使用 setTimeout() 延时 2 秒钟后再次调用 intervalFunc()，然后再调用 sayHello() 函数输出 Hello World 。这个调用结构就可以形成一个循环，每隔 2 秒钟执行一次 intervalFunc()，接下来 sayHello() 函数就会再次被调用，输出 Hello World 了。

这就是setInterval和setTimeout用法的一些应用，希望能对你有所帮助~