js计时器方法的使用
js中计时器重要使用window.setInterval()方法和window.setTimeout()方法,
其中setInterval()方法的作用是每隔一段时间执行一次方法,而window.setTimeout()在一段时间内调用函数。
setTimeout()方法一般通过调用自身迭代的方式实现计时器。与这两个方法对应的,还有清除这两个函数效果的
两个方法,分别是window.clearInterval()和window.clearTimeout()。
1.setInterval()和clearInterval() (window可以省略)
(1)setInterval()方法常用的语法如下:
setInterval(function,interval);
其中function是将要在间隔时间内执行的函数,interval是间隔的时间,单位是毫秒。
(2)clearInterval()方法的常用语法如下:
timer = setInterval(function,interval);
clearInterval(timer);
例子:
<html>
<head></head>
<body>
<p id="timer">点击开始计时!</p>
<div>
<button id="cutTimer" onclick="start()">开始</button>
<button id="cutTimer" onclick="stop()">停止</button>
</div>
<script>
var cutT = document.getElementById("cutTimer"); var timer1 = null; function start(){
var countTime = function(){
date = new Date();
dateStr = date.toLocaleTimeString();
document.getElementById("timer").innerHTML = dateStr;
} timer1 = window.setInterval(countTime,1000); } function stop(){
console.log("timer stop:"+timer1);
window.clearInterval(timer1);
}; </script>
</body>
</html>
在这个例子中,点击开始后(会有一段延迟),页面上每隔1000毫秒(也就是1秒)执行一次,也就是显示当前的时分秒。
2.setTimeout()和clearTimeout()
这两个方法与setInterval()和clearInterval()方法用法类似,示例如下:
<html>
<head></head>
<body>
<p id="timer"></p>
<div>
<button id="cutTimer" onclick="timeOutAlert();">执行</button>
<button id="cutTimer" onclick="stopTimeOutAlert();">停止</button>
</div>
<script>
timeOut = null;
function timeOutAlert(){
timeOut = window.setTimeout(function(){
console.log("time out..."+timeOut);
timeOutAlert();
},1000);
} function stopTimeOutAlert(){
console.log("timeCut:"+timeOut);
window.clearTimeout(timeOut);
}
</script>
</body>
</html>
可以看到timeOutAlert()方法每隔1000毫秒调用自身,在控制台打印出当前timeOut的值,timeOut第一次使用
setTimeout()后为1,每次增加1,clearTimeout()通过这个数字作为入参清除当前的setTimeout()。
js计时器方法的使用的更多相关文章
- js计时器方法 setInterval(),setTimeout()
window.setInterval() 周期性地调用一个函数(function)或者执行一段代码. var intervalID = window.setInterval(func, delay[, ...
- js调用php和php调用js的方法举例
js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...
- 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法
jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery 互相调用iframe页面中js的方法
1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...
- JS扩展方法——字符串trim()
转自:http://www.cnblogs.com/kissdodog/p/3386480.html <head> <title>测试JS扩展方法</title> ...
- Js apply 方法 详解
Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- JavaScript基础12——js的方法重载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS replace()方法-字符串首字母大写
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace()方法有两个参数,第一个参数是正则表达式,正则表达式如果带全局标志/g,则是代表替换 ...
随机推荐
- Leetcode题库——21.合并两个有序链表
@author: ZZQ @software: PyCharm @file: mergeTwoLists.py @time: 2018/9/16 20:49 要求:将两个有序链表合并为一个新的有序链表 ...
- Week2-作业1
第一章:引用:如果一架民用飞机上有一个功能,用户使用它的概率是百万分之一,你还要做这个功能么? 选择之后,这个功能是什么呢?谜底是飞机的安全功能. 个人认为,飞机的安全功能这个 ...
- BUAA软工个人作业Week2-代码复审
一. 代码复审Check List 1.概要部分 代码能符合需求和规格说明么? 对-c的测试: 可以看到程序不支持1000000的数独终局输出,读源码发现常量MaxCounts定义为了100000,导 ...
- Two Sum III - Data structure design
Design and implement a TwoSum class. It should support the following operations: add and find. add - ...
- Java容器深入浅出之PriorityQueue、ArrayDeque和LinkedList
Queue用于模拟一种FIFO(first in first out)的队列结构.一般来说,典型的队列结构不允许随机访问队列中的元素.队列包含的方法为: 1. 入队 void add(Object o ...
- NLP & AI
NLP & AI Anaconda The Most Popular Python Data Science Platform https://www.anaconda.com/what-is ...
- nginx通过配置empty_gif解决请求favicon 404的问题
背景介绍 因为一些浏览器在访问网站时会默认去请求网站的favicon,但是我的网站(Tengine)上并没有这些icon图片,因此在访问日志里会出现大量的404错误,会触发一些没必要日志告警.我们可以 ...
- JS调用App方法及App调用JS方法
做App内嵌H5项目时,经常会遇到js与App的交互,最普遍的就是方法的互相调用,那么如何实现方法的互相调用呢? 写在前面: 如果只是小项目且后期扩大的可能性不大的时候,可以忽略,可如果是长期项目的话 ...
- libuv 简单使用
libuv 简单使用 来源:https://zhuanlan.zhihu.com/p/50497450 前序:说说为啥要研究libuv,其实在很久之前(大概2年前吧)玩nodejs的时候就对这个核心库 ...
- STL Map和multimap 容器
STL Map和multimap 容器 map/multimap的简介 map是标准的关联式容器,一个map是一个键值对序列,即(key,value)对.它提供 基于key的快速检索能力. ...