JavaScript定时器原理详解
目录
- 一、 setTimeout() 定时器
- 二、停止 setTimeout() 定时器
- 三、setInterval() 定时器
- 四、清除setInterval() 定时器
- 五、电子时钟案例
前言：
在很多页面中，我们都可以看到一些倒计时或者和时间相关的效果，今天小熊将就JavaScript里面的倒计时做一概述。
首先，我们先来看看定时器，在JS中，有两种定时器：
一、 setTimeout() 定时器
语法：
window.setTimeout(调用函数, [延迟的毫秒数]);
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
例如：写一个页面，让其五秒钟后弹出‘你好’。
代码如下：
window.setTimeout(function(){
alert('你好');
},5000);
运行结果为：
需要注意的是：
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);
})
运行效果为：
可以看到，当我们没有点击停止按钮的时候，五秒钟后弹出‘你好’，刷新页面后，当我们点击按钮后，不论过多久，都不会有弹窗，清除定时器成功。
三、setInterval() 定时器
我们再来看看另一种定时器。
window.setInterval(回调函数, [间隔的毫秒数]);
setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
- window 可以省略。
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
- 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
- 我们经常给定时器赋值一个标识符。
- 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。
举个例子：
我们来写一个定时器，让其每隔一秒就打印一个‘你好’，代码为：
setInterval(function(){
console.log('你好')
},1000);
运行效果为：
四、清除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>
运行效果为：
五、电子时钟案例
我们现在就可以做一个电子时钟，显示当前的年月日时分秒，并让他们自动变化，代码如下：
<!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定时器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JavaScript定时器类型总结
目录 1.setInterval() 2.setTimeout() 1.setInterval() 按照指定的周期(以毫秒计)来调用函数. 方法会不停地调用函数,直到调用clearInterval() 或窗口被关闭. 语法: setInterval(code,millisec,[arg1, arg2, ...]) 参数 描述 code 必需.要执行的代码串. millisec 必须.时间间隔,以毫秒计. arg1, arg2, - 可选.当定时器过期的时候,将被传递给func指定函数的附加参数
-
JavaScript定时器实现限时秒杀功能
本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 文件index.html 代码: <!DOCTYPE html> <html> <head> <meta charset="GBK" /> <title>show</title> <link rel="stylesheet" href="css/index.css" type=
-
JavaScript定时器实现无缝滚动图片
本文实例为大家分享了JavaScript实现无缝滚动图片的具体代码,供大家参考,具体内容如下 文本: setInterval 开启间隔型定时器 clearTimeout 关闭定时器 offsetWidth 获取宽度 offsetLeft 获取向左偏移量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝移动<
-
JavaScript 定时器详情
目录 1.简单介绍 2.setInterval 2.1 描述 2.2 参数 2.3 返回值 2.4 用法 3.setTimeout 3.1 描述 3.2 参数 3.3 用法 4.取消timer 5.在控制台使用定时器 1.简单介绍 在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法. 这都是window的对象,调用时可以省略window.这两个方法并不在 JavaScript 的规范中. 定时器方法相关方法有四种: 方法 描述
-
详解JavaScript的定时器
目录 简单介绍 setInterval 描述 参数 返回值 用法 setTimeout 描述 参数 用法: 取消timer 在控制台使用定时器 console.time(timerName) console.timeEnd(timerName) 用法 总结 简单介绍 在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法. 这都是window的对象,调用时可以省略window.这两个方法并不在 JavaScript 的规范中. 定
-
JavaScript定时器原理详解
目录 一. setTimeout() 定时器 二.停止 setTimeout() 定时器 三.setInterval() 定时器 四.清除setInterval() 定时器 五.电子时钟案例 前言: 在很多页面中,我们都可以看到一些倒计时或者和时间相关的效果,今天小熊将就JavaScript里面的倒计时做一概述.首先,我们先来看看定时器,在JS中,有两种定时器: 一. setTimeout() 定时器 语法: window.setTimeout(调用函数, [延迟的毫秒数]); setTimeo
-
JavaScript原型继承和原型链原理详解
这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性副本,又能共享同一个方法,这样的好处就是可以极大的节省内存空间.同时还可以向构造函数传递参数,十分的方便. 这里还要再讲一下两种特色的构造
-
JavaScript对象原型链原理详解
这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个js对象,除了自己设置的属性外,还会自动生成proto.class.extensible属性,其中,proto属性指向对象的原型. 对象的属性也有writable.enumerable.configurable.value和get/set的配置方法. 对象的创建方式有三种: 一.使用字面量直接创建. 二.基于原型链创建. 分析上图,要点如
-
javascript异常处理实现原理详解
这篇文章主要介绍了javascript异常处理实现原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.什么是例外处理 当 JavaScript程序在运行中发生了诸如数组索引越界.类型不匹配或者语法错误时,JavaScript解释器就会引发例外处理. ECMAScript定义了六种类型的错误,除此之外,我们可以使用Error对象和throw语句来创建并引发自定义的例外处理信息. 通过运用例外处理技术,我们可以实现用结构化的方式来响应错误事
-
Python定时器线程池原理详解
这篇文章主要介绍了Python定时器线程池原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 定时器执行循环任务: 知识储备 Timer(interval, function, args=None, kwargs=None) interval ===> 时间间隔 单位为s function ===> 定制执行的函数 使用threading的 Timer 类 start() 为通用的开始执行方法 cancel ()为取消执行的方法 普通单次
-
JavaScript开发简单易懂的Svelte实现原理详解
目录 Demo1 create_fragment SvelteComponent 可以改变状态的Demo Svelte问世很久了,一直想写一篇好懂的原理分析文章,拖了这么久终于写了. Demo1 首先来看编译时,考虑如下App组件代码: <h1>{count}</h1> <script> let count = 0; </script> 这段代码经由编译器编译后产生如下代码,包括三部分: create_fragment方法 count的声明语句 class
-
Javascript对象及Proxy工作原理详解
正文 这一章其实算是javascript的科普文章,其实这本书的读者一般都不会是入门者,因此按道理说应该不需要再科普才对.但是作者依旧安排了这一章,证明就是这一章内容与我们以为的对象不一样. Javascript中一切皆对象 这一句话大家应该耳熟能详,对于常规的字面量对象,和new出来的对象,大家应该都能分辨 const str = '' const str2 = new String() const obj = {} const obj2 = Object.create() 但是根据ECMA,
-
golang 一次性定时器Timer用法及实现原理详解
目录 前言 Timer timer结构体 创建定时器 停止定时器 重置定时器 实现原理 数据结构 runtimeTimer 创建Timer 停止Timer 重置Timer 前言 定时器在Go语言应用中使用非常广泛,Go语言的标准库里提供两种类型的计时器,一种是一次性的定时器Timer,另外一种是周期性的定时器Ticker.本文主要来看一下Timer的用法和实现原理,需要的朋友可以参考以下内容,希望对大家有帮助. Timer Timer是一种单一事件的定时器,即经过指定的时间后触发一个事件,因为T
-
Go Ticker 周期性定时器用法及实现原理详解
目录 前言 Ticker 应用示例 创建定时器 停止定时器 实现原理 数据结构 runtimeTimer 创建Ticker 停止Ticker Ticker 与 Timer 区别 小结 前言 定时器在Go语言应用中使用非常广泛,Go语言的标准库里提供两种类型的计时器,一种是一次性的定时器Timer,另外一种是周期性的定时器Ticker.本文主要来看一下Ticker的用法和实现原理,需要的朋友可以参考以下内容,希望对大家有帮助. Ticker Ticker是周期性定时器,即周期性的触发一个事件,它会
-
JavaScript面试Module Federation实现原理详解
目录 基本概念 1.什么是 Module Federation? 2.Module Federation核心概念 3.使用案例 4.插件配置 工作原理 1.使用MF后在构建上有什么不同? 2.如何加载远程模块? 3.如何共享依赖? 应用场景 1.代码共享 2.公共依赖 总结 基本概念 1.什么是 Module Federation? 首先看一下官方给出的解释: Multiple separate builds should form a single application. These sep