前言

JS中定时器并不算难点，但是我还是拿出来讲，过于经典的案例往往是最为基础的知识点，仅供参考学习。

一、定时器

setTimeout(code,millisec)：只执行 code 一次。

setInterval(code,millisec)：会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

clearTimeout() ：可取消由 setTimeout() 方法设置的 timeout。

clearInterval() ：可取消由 setInterval() 设置的 timeout。

定时器非常好理解，set就是定时器，clear就是清除定时器，timeout就是定时器只用一次，interval就是循环使用。

二、定时器的使用

1.定时器

代码如下（示例）：

<body>
<script>function time() {alert('倒计时时间到')}var times = setTimeout(time,3000);
</script>
</body>

2.清除定时器

<body>
<script>function time() {alert('倒计时时间到')}var times = setTimeout(time,3000);clearInterval(times);
</script>
</body>

setInterval（）和cleaInterval（）的原理也是一样的，我就不在这里写了

三、案例

1.倒计时

代码如下（示例）：

    <style>div {margin: 200px;}span {display: inline-block;width: 40px;height: 40px;background-color: #333;font-size: 20px;color: #fff;text-align: center;line-height: 40px;}</style>
</head><body><div><span class="hour">1</span><span class="minute">2</span><span class="second">3</span></div><script>// 1. 获取元素var hour = document.querySelector('.hour'); // 小时的黑色盒子var minute = document.querySelector('.minute'); // 分钟的黑色盒子var second = document.querySelector('.second'); // 秒数的黑色盒子var inputTime = +new Date('2021-7-9 00:00:00'); // 返回的是用户输入时间总的毫秒数countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白// 2. 开启定时器setInterval(countDown, 1000);function countDown() {var nowTime = +new Date(); // 返回的是当前时间总的毫秒数var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数var h = parseInt(times / 60 / 60 % 24); //时h = h < 10 ? '0' + h : h;hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子var m = parseInt(times / 60 % 60); // 分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60); // 当前的秒s = s < 10 ? '0' + s : s;second.innerHTML = s;}</script>
</body>

效果图如下：

2.使用和清除定时器

代码如下（示例）：

<body>
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<p></p>
<script>var begin = document.querySelector('.begin');var stop = document.querySelector('.stop');var p  = document.querySelector('p');var timer = null; // 全局变量  null是一个空对象begin.addEventListener('click', function() {timer = setInterval(function() {p.innerHTML+='起飞！';}, 1000);})stop.addEventListener('click', function() {clearInterval(timer);})
</script>
</body>

效果图如下：

3.发送短信

代码如下（示例）：

<body>
<label>手机号码：<input type="number">
</label>
<button>发送</button><script>// 按钮点击之后，会禁用 disabled 为true // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改// 里面秒数是有变化的，因此需要用到定时器// 定义一个变量，在定时器里面，不断递减// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态var btn = document.querySelector('button');var time = 3; // 定义剩下的秒数btn.addEventListener('click', function() {btn.disabled = true;var timer = setInterval(function() {if (time == 0) {// 清除定时器和复原按钮clearInterval(timer);btn.disabled = false;btn.innerHTML = '发送';} else {btn.innerHTML = '还剩下' + time + '秒';time--;}}, 1000);})</script>
</body>

效果图如下：

发送短信案例较为简单，我会在另一篇文章中更为详细的去使用定时器

总结

定时器的原理和案例都较为简单，但是在后面复杂的页面设计中，希望大家能够将其掌握，不要因为页面复杂而将定时器搞的复杂，这样就得不偿失了。

如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！

JS定时器原理及案例相关推荐

js定时器与数码时钟案例（源码及备注）
js定时器与数码时钟案例开启定时器 1.setInterval 间隔型 setInterval(参数一,参数二); 第一个参数是一个函数,第二个参数是时间(单位是毫秒) 意思就是每隔多长时间执行一次 ...
前端——JS之定时器的小案例（1）
定时器点名小案例(抽奖游戏也同理)&&详细注释 <!DOCTYPE html> <html lang="en"> <head>& ...
JavaScript定时器原理分析
JavaScript中的定时器大家基本在平时的开发中都遇见过吧,但是又有多少人去深入的理解其中的原理呢?下面我们就来分析一下定时器的实现原理. 一.储备知识在我们在项目中一般会遇见过这样的两种定时器 ...
一文讲透大型网站架构模式核心原理与案例分析
什么是模式?每一个模式描述了一个在我们周围不断发生的问题及该问题解决方案的核心.这样,你就能一次又一次地使用该方案而不必做重复的工作. 也许互联网产品不是随便复制就能成功的,创新的产品更能为用户创造价 ...
读书笔记之大型网站技术架构(核心原理与案例分析)
前言坚持看了十几天的书,终于完成了毕业后第一次静下心来,利用业务时间看书并做笔记的成就了.废话不多说,这回看的是一直很膜拜的李智慧大神写的大型网站技术架构-核心原理与案例分析. 简短的读后感极其推 ...
JS 定时器的4种写法及介绍
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout.setInterval.setImmediate.requestAnimationFrame. 一.什么是定时 ...
浏览器原理-v8引擎-js执行原理
浏览器原理-v8引擎-js执行原理 js简介 js应用: js的应用很广泛可以应用于web,移动端,小程序,桌面应用,后端开发等 web开发包括(原生js,react,vue,angular等) 移 ...
vuejs 原生JS 拖拽事件案例
原生JS or Vue 事件案例合集(详细) 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 Section 1 单个或多个鼠标拖拽事件的理解提示:写完文章后,目录可以自动生成,如 ...
js 定时器（setTimeout/setInterval）出现变量未定义（xxx is not defined）的解决方法
js 定时器(setTimeout/setInterval)出现变量未定义(xxx is not defined) 的解决方法参考文章: (1)js 定时器(setTimeout/setInterv ...
大型网站技术架构：核心原理与案例分析阅读笔记二
大型网站技术架构:核心原理与案例分析阅读笔记二网站架构设计时可能会存在误区,其实不必一味追随大公司的解决方案,也不必为了技术而技术,要根据本公司的实际情况,制定适合本公司发展的网站架构设计,否则会变 ...

JS定时器原理及案例

JS定时器原理及案例

前言

一、定时器

二、定时器的使用

1.定时器

2.清除定时器

三、案例

1.倒计时

2.使用和清除定时器

3.发送短信

总结

JS定时器原理及案例相关推荐

最新文章

热门文章