返回顶部
首页 > 资讯 > 精选 >JavaScript定时器原理是什么
  • 740
分享到

JavaScript定时器原理是什么

2023-06-21 23:06:37 740人浏览 薄情痞子
摘要

本篇内容介绍了“javascript定时器原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、 setTimeout() 定时器语法

本篇内容介绍了“javascript定时器原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

一、 setTimeout() 定时器

语法:

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
例如:写一个页面,让其五秒钟后弹出‘你好'。

代码如下:

window.setTimeout(function(){            alert('你好');        },5000);

运行结果为:

JavaScript定时器原理是什么

需要注意的是:

  • window 可以省略。

  • 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。

  • 延迟的毫秒数省略默认是 0,如果写,必须是毫秒。setTimeout() 这个调用函数我们也称为回调函数callback,普通函数是按照代码顺序直接调用。而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。

二、停止 setTimeout() 定时器

当我们创建了一个定时器的话,如果我们想要将其取消,应该怎样操作呢?就用到了清除定时器的函数,如下:

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器。
这里面window 可以省略,并且里面的参数就是定时器的标识符 。

举个例子:

就上述案列,如果我们想要在指定事件前停止它,可以先添加一个点击按钮,给这个按钮添加清除定时器的事件,操作为:

  var hello = window.setTimeout(function(){            alert('你好');        },5000);        var btn = document.querySelector('button');        btn.addEventListener('click',function(){            window.clearTimeout(hello);        })

运行效果为:

JavaScript定时器原理是什么

可以看到,当我们没有点击停止按钮的时候,五秒钟后弹出‘你好',刷新页面后,当我们点击按钮后,不论过多久,都不会有弹窗,清除定时器成功。

三、setInterval() 定时器

我们再来看看另一种定时器。

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。

  • window 可以省略。

  • 这个调用函数可以直接写函数,或者写函数名或者采取字符串 ‘函数名()' 三种形式。

  • 间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。

  • 我们经常给定时器赋值一个标识符。

  • 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。

举个例子:

我们来写一个定时器,让其每隔一秒就打印一个‘你好',代码为:

  setInterval(function(){            console.log('你好')        },1000);

运行效果为:

JavaScript定时器原理是什么

四、清除setInterval() 定时器

同样的,我们也可以清除setInterval() 定时器的效果,语法为:

window.clearInterval(intervalID);

 clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

注意:

  • window 可以省略。

  • 里面的参数就是定时器的标识符 。

比如我们现在有两个按钮,点击一个可以开启定时器,点击另一个可以清除该定时器,操作方法为:

<body>    <button class='begin'>开始</button>    <button class='stop'>停止</button>    <script>        var btn = document.querySelectorAll('button');        var timer = null;        btn[0].addEventListener('click',function(){            timer = setInterval(function(){                console.log('你好');            },1000)        })        btn[1].addEventListener('click',function(){            clearInterval(timer)        })</script></body>

运行效果为:

JavaScript定时器原理是什么

五、电子时钟案例

我们现在就可以做一个电子时钟,显示当前的年月日时分秒,并让他们自动变化,代码如下:

<!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>    <style>        div {            width: 500px;            margin: 100px auto;            font-size: 25px;        }    </style></head><body>    <div></div>    <script>        var div = document.querySelector('div');        function showTime(){            var date = new Date();            var y = date.getFullYear();            var m = date.getMonth()+1;            m = m>=10?m:'0'+m;            var d = date.getDate();            d = d>=10?d:'0'+d;            var h = date.getHours();            h = h>=10?h:'0'+h;            var dm = date.getMinutes();            dm = dm>=10?dm:'0'+dm;            var ds = date.getSeconds();            ds = ds>=10?ds:'0'+ds;            var str = y+'年'+m+'月'+d+'日  '+h+'时'+dm +'分'+ds+'秒';            div.innerHTML = str;            setTimeout(showTime,1000);        }        window.onload = showTime();    </script></body></html>

运行效果为:

JavaScript定时器原理是什么

“JavaScript定时器原理是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: JavaScript定时器原理是什么

本文链接: https://lsjlt.com/news/301400.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript定时器原理是什么
    本篇内容介绍了“JavaScript定时器原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、 setTimeout() 定时器语法...
    99+
    2023-06-21
  • 什么是JavaScript 定时器
    这期内容当中小编将会给大家带来有关什么是JavaScript 定时器,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。1、简单介绍在JavaScript中定时器有两个 setInterval() 与 setT...
    99+
    2023-06-25
  • 定时器的工作原理是什么
    定时器的工作原理可以分为硬件定时器和软件定时器两种类型。硬件定时器的工作原理是时钟信号源提供稳定的时钟信号作为计时器的基准。计数器从预设值开始计数,每当时钟信号到达时计数器递增。当计数器达到预设值时,定时器会触发一个中断信号通知中断控制器处...
    99+
    2023-08-16
  • JavaScript定时器原理详解
    目录一、 setTimeout() 定时器二、停止 setTimeout() 定时器三、setInterval() 定时器四、清除setInterval() 定时器五、电子时钟案例前...
    99+
    2024-04-02
  • JS定时器的工作原理是什么
    JS定时器的工作原理是通过设置一个计时器,来定时执行特定的代码。JS中有两种定时器:setTimeout和setInterval。1...
    99+
    2023-09-15
    JS
  • linux定时器实现的原理是什么
    Linux定时器的实现原理如下:1. 内核中的定时器是通过“定时器”数据结构来表示的。该数据结构包含了定时器的到期时间、回调函数、回...
    99+
    2023-10-09
    linux
  • android定时器的工作原理是什么
    Android定时器的工作原理是通过使用Java中的Timer或者Handler类来实现的。1. Timer类:Timer类是Jav...
    99+
    2023-08-29
    android
  • Js中定时器的工作原理是什么
    在JavaScript中,定时器可以通过setTimeout()和setInterval()函数来创建。setTimeout()函数...
    99+
    2023-09-12
    Js
  • Go定时器内部的实现原理是什么
    这篇文章主要讲解了“Go定时器内部的实现原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Go定时器内部的实现原理是什么”吧!前言本节,我们重点关注系...
    99+
    2024-04-02
  • Java定时任务的实现原理是什么
    Java定时任务的实现原理是基于线程池和计时器的机制。在Java中,可以使用ScheduledExecutorService接口来创...
    99+
    2023-10-20
    Java
  • JavaScript原型链的原理是什么
    这篇文章主要讲解了“JavaScript原型链的原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript原型链的原理是什么”吧!解析原型...
    99+
    2024-04-02
  • javascript中Promise原理是什么
    本篇内容主要讲解“javascript中Promise原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript中Promise原理是什么”吧...
    99+
    2024-04-02
  • JavaScript编译原理是什么
    本篇内容介绍了“JavaScript编译原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.分词/...
    99+
    2024-04-02
  • golang定时器Timer的用法和实现原理是什么
    本篇内容介绍了“golang定时器Timer的用法和实现原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!TimerTimer是一种单...
    99+
    2023-07-06
  • WCF绑定原理是什么
    这篇文章主要介绍“WCF绑定原理是什么”,在日常操作中,相信很多人在WCF绑定原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”WCF绑定原理是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!WC...
    99+
    2023-06-17
  • JavaScript中jsdeferred的原理是什么
    这篇文章将为大家详细讲解有关JavaScript中jsdeferred的原理是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。2.1 构造函数这里使用了安...
    99+
    2024-04-02
  • JavaScript中this的原理是什么
    本篇文章为大家展示了JavaScript中this的原理是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。 一、this原理this是JavaScrip...
    99+
    2024-04-02
  • JavaScript的运行原理是什么
    这篇文章将为大家详细讲解有关JavaScript的运行原理是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。扫描器源代码首先被分解成 chunk,每个 c...
    99+
    2024-04-02
  • JavaScript浏览器事件的原理是什么
    JavaScript浏览器事件的原理是什么 ,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。JavaScript 程序采用了异步事件驱动编程(E...
    99+
    2024-04-02
  • javascript定时器有什么函数
    这篇文章主要讲解了“javascript定时器有什么函数”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript定时器有什么函数”吧! ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作