JavaScript:setInterval() 用法详解

这篇具有很好参考价值的文章主要介绍了JavaScript:setInterval() 用法详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 基本语法

setInterval() 是 JavaScript 中的一个内置函数,它用于在指定的间隔时间内重复执行一段代码,实现周期性操作。该函数的语法如下:

setInterval(function, milliseconds, param1, param2, ...)

2 参数说明

  • function:必需,要重复执行的函数或代码块。
  • milliseconds:必需,重复执行的时间间隔(以毫秒为单位)。
  • param1, param2, ...:可选,传递给要执行的函数的参数。如果无须传递参数,则省略此参数。

注意:

如果 setInterval() 函数的第一个参数是一个函数,那么该函数会在每个时间间隔后被调用,直到计时器被取消。

如果 setInterval() 函数的第一个参数是一个字符串,那么该字符串会被解释为一段要执行的 JavaScript 代码。这种用法已经被弃用,不建议使用。

如果 setInterval() 函数的时间间隔设为 0 或负数,那么该函数会立即执行第一个参数所表示的函数或代码,并且不会周期性地执行。

如果 setInterval() 函数的时间间隔设为较小的值,那么可能会因为浏览器的性能限制而导致定时器不准确。建议将时间间隔设为 100 毫秒或以上,以保证计时器的准确性。

3 使用示例

使用匿名函数作为第一个参数,用来输出当前时间,间隔时间是1000毫秒即1秒钟。

// 每秒钟输出一次当前时间
setInterval(function() {
  console.log(new Date().toLocaleTimeString());
}, 1000);

4 停止 setInterval() 方法

setInterval() 方法会返回一个计时器ID,可以通过该计时器ID来取消计时器的执行,方法如下:

intervalId = setInterval(function() {
  console.log(new Date().toLocaleTimeString());
}, 1000);

clearInterval(intervalId );

其中,intervalId 是一个变量,用于保存 setInterval() 方法返回的计时器对象ID。调用 clearInterval() 方法后,就可以取消计时器的执行。

示例: 打印5次后,取消计时器的执行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var counter = 0;
        maxNum = 5;
        function myFunc() {
            var date = new Date();
            console.log(date.toLocaleTimeString());
            counter++;
            if (counter == maxNum) {
                clearInterval(intervalId);
                console.log('已打印' + maxNum + "次");
            }
        }

        var intervalId = setInterval(myFunc, 1000);
    </script>
</body>

</html>

打印结果:

javascript setinterval,# Javascript 杂记,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-702746.html

到了这里,关于JavaScript:setInterval() 用法详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript 中的 Window.open() 用法详解

    window.open() 方法是 JavaScript 中的一个内置方法,用于在浏览器中打开一个新的窗口或标签页。 这个方法的语法是: 需要注意的是,由于弹出窗口的滥用已经成为了一个安全问题,现代浏览器通常会默认阻止 window.open() 方法的调用,除非是在用户的交互下触发的。因此,在实际

    2024年02月14日
    浏览(36)
  • 【34JavaScript let 和 const】JavaScript中的“let“和“const“关键字详解:作用、用法及区别

    // 使用 let 声明变量 let x = 10; // 在同一作用域内重新赋值 x = 20; // 在不同的作用域内使用 let 声明变量 function example() { let y = 30; console.log(x); // 输出:20 console.log(y); // 输出:30 } console.log(x); // 输出:20 console.log(y); // 报错:y is not defined // 使用 const 声明常量 const PI = 3.14159; // 尝

    2024年02月08日
    浏览(43)
  • 定时器 setTimeout、setInterval详解

    定时器:按我个人理解来说就是固定某个时间后,时间到了,就提醒我时间到了。 程序中的定时器:相当于倒计时,也相当于计时器。作用是在设定的某个时间后,执行特定的方法。 我们先来了解一下setTimeout定时器,他的特点就是只能用一次,也称为一次性定时器。 接着看

    2023年04月08日
    浏览(35)
  • JavaScript高级技巧:深入探索JavaScript语言的高级特性和用法

    当我们谈论JavaScript高级技巧时,以下是一些示例来说明这些概念: 闭包(Closures): 在上面的例子中, innerFunction 是一个闭包,它可以访问外部函数 outerFunction 中的 outerVariable 变量,即使在外部函数执行结束后也可以。 高阶函数(Higher-Order Functions): 在上面的例子中,

    2024年02月08日
    浏览(49)
  • 前端基础3——JavaScript基础用法

    JavaScript(简称JS):是一种轻量级客户端脚本语言,通常被直接嵌入HTML 页面,在浏览器上执行。 JavaScript作用:改变页面中的HTML元素、属性、样式、事件。 内嵌样式,在body标签中使用。 1.在body标签中写js脚本。 2.查看效果。 在head标签中使用。 1.编写js脚本main.js,统一存放

    2024年02月10日
    浏览(46)
  • JavaScript Web Worker用法指南

    🧑‍🎓 个人主页: 《爱蹦跶的大A阿》 🔥 当前正在更新专栏: 《VUE》 、《JavaScript保姆级教程》、《krpano》 ​  ​         Web Worker可以将耗时任务放到后台执行,避免阻塞UI。本文将详细介绍Web Worker的用法,让你可以提升web应用性能。 通过本文你将学习: Web Worker的工作

    2024年01月18日
    浏览(31)
  • 深入解析JavaScript中箭头函数的用法

    🧑‍🎓 个人主页: 《爱蹦跶的大A阿》 🔥 当前正在更新专栏: 《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​  ​         箭头函数(Arrow function)是JavaScript ES6中引入的一大特性。箭头函数与传统函数有一些区别,可以帮助我们简化代码并处理一些棘

    2024年01月20日
    浏览(48)
  • javascript二维数组(9)toString的用法

    在JavaScript中, toString() 是一个内置方法,用于将特定的对象转化为字符串表示形式。 以下是一些 toString() 方法的基本使用示例: 数字的 toString() : 日期的 toString() : 数组的 toString() : 注意,对于数组, toString() 方法在每个元素之间添加逗号,而在字符串的末尾添加一个逗

    2024年02月07日
    浏览(34)
  • JavaScript-HTML DOM的用法

    题记         javascript中html dom的用法 通过id查找元素 通过标签名查找元素  通过类名查找元素  后记         觉得有用可以点赞或收藏!

    2024年02月08日
    浏览(34)
  • 一文吃透JavaScript中的DOM知识及用法

       DOM : D ocument O bject M odel(文档对象模型),定义了用户操作文档对象的接口,可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新。它使得用户对HTML有了空前的访问能力,并使开发者将HTML作为XML文档来处理。 本文知识导图如下:    DOM是网页的核心结构,无论是

    2023年04月08日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包