# JavaScript 计时事件
* * *
通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
* setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
* setTimeout() - 暂停指定的毫秒数后执行指定的代码
* **Note:** setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
## setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码
### 语法
window.setInterval("*javascript function*",*milliseconds*);
**window.setInterval()** 方法可以不使用window前缀,直接使用函数**setInterval()**。
setInterval() 第一个参数是函数(function)。
第二个参数间隔的毫秒数
**注意:** 1000 毫秒是一秒。
## 如何停止执行?
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
### 语法
window.clearInterval(*intervalVariable*)
**window.clearInterval()** 方法可以不使用window前缀,直接使用函数**clearInterval()**。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:
myVar=setInterval("*javascript function*",*milliseconds*);
```
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
```
## setTimeout() 方法
### 语法
window.setTimeout("*javascript 函数*",*毫秒数*);
setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示:1000 毫秒等于一秒。
## 如何停止执行?
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
### 语法
window.clearTimeout(*timeoutVariable*)
**window.clearTimeout()** 方法可以不使用window 前缀。
要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:
myVar=setTimeout("*javascript function*",*milliseconds*);
如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。
```
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}
```
60s倒计时案例
```
var time\=10;
var start;
function tests(){
start\=setInterval(function(){getTime()}, 1000);
}
function getTime(){
document.getElementById('time').innerHTML\=time;
time\-=1;
if(time<0){
clearInterval(start);
console.log('倒计时结束');
document.getElementById('time').innerHTML\='发送验证码';
time\=10;
}
}
```
- 空白目录
- CSS相关知识
- 透明度
- 鼠标样式
- 盒子隐藏
- 背景图
- 文本
- 字体
- 链接
- 列表样式
- 边框border
- 轮廓outline
- 外边距Margin
- 内填充Padding
- Css综合
- css分组和嵌套
- css尺寸
- CSS鼠标样式
- 显示与隐藏 display
- 定位
- Vue2
- Vue的核心原理
- vue的拦截原理
- vue的模板语法
- 数据绑定
- MVVM
- 事件处理
- 计算属性与监视
- class与style的绑定
- 条件渲染
- 列表渲染
- 收集表单
- 内置指令
- vue的生命周期
- 单文件组件
- vue脚手架
- 基础知识
- ref和props
- mixin混入
- 插件
- scoped样式
- 缓存WebStorage
- 组件的通信
- 消息的发布于订阅
- 全局事件总线
- 组件自定义事件
- nextTick
- vue封装的过渡于动画
- Vue脚手架配置代理
- 插槽
- Vuex
- 搭建vuex环境
- 基本使用
- getters的使用
- 四个Map的使用
- 模块化+命名空间
- 路由
- route基本使用
- 注意点
- 多级路由
- query参数
- 命名路由
- params参数
- 路由的props配置
- route-link的replace属性
- 编程式路由导航
- 缓存路由文件
- 两个生命周期钩子(路由)
- 路由守卫
- 路由器的两种工作方式
- Vue常用UI库
- JavaScript相关知识
- 基础知识
- Js常用表达式
- Js常见的事件
- Js的重要公共方法
- Js数据类型
- Js字符串
- Js数组
- Js布尔类型
- Js的类型转换
- Js算数
- Js的日期处理
- Js的循环
- Js正则匹配
- Js的DOM篇
- Js的DOM1
- Js的DOM2
- Js高级教程
- Js的BOM
- Js之Window
- Js之Window Screen
- Js之Window Location
- Js之Window History
- Js之Navigator
- Js之弹框
- Js之计时
- Js之Cookies
- Js库-框架篇
- jquery
- prototype
- Vue3