setInterval 与 clearInterval详解
首先注意,setInterval与clearInterval都是直属于window对象的。
1、直接调用setInterval(即不通过函数调用)
<div id="oDiv_showCurrTime0" style="border:1px solid black; height:20px;"></div>
<script>
var dT = document.getElementById("oDiv_showCurrTime0");
//var inX = setInterval("funX()",1000);
var inX = setInterval(funX,1000); //setInerval直接使用时,这两种方法都可以
function funX(){
var dTime = new Date();
dT.innerHTML = dTime.toLocaleTimeString()
}
</script>
2、函数调用setInterval和clearnterval
<div id="oDiv_showCurrTime" style="border:1px solid black; height:20px;"></div><button onclick="startX()">开始</button><button onclick="stopX()">停止</button>
<script>
var intX; //这个必须写在startX函数外或不写,stopX才有效。
function startX(){
intX= setInterval(func,500) //通过函数调用setInterval时,第一个参数不可以用"func()"这种形式,只能直接用函数名
var dT = document.getElementById("oDiv_showCurrTime");
function func(){
var dTime = new Date();
dT.innerHTML = dTime.toLocaleTimeString()
}
}
function stopX(){
window.clearInterval(intX) //注意!如果var intX定义在startX内,则无法清除!
}
</script>
3、函数调用带有参数的setInterval
<div id="oDiv_showCurrTime" style="border:1px solid black; height:20px;"></div><button onclick="startX()">开始</button><button onclick="stopX()">停止</button>
<script>
var intX; //这个必须不写或者写在startX函数外,stopX才有效。
var arr = new Array;
arr[0]="rrr"
function startX(){
//intX= setInterval(func("rrr"),500) 这种方法是错误的。如果需要调用带参数的函数,直接使用func("rrr")会在第一次加载后,提示参数无效
intX= setInterval(function(){func.apply(this,arr)},500) //apply参数问题请查资料
function func(a){
var dT = document.getElementById("oDiv_showCurrTime");
var dTime = new Date();
dT.innerHTML = a + dTime.toLocaleTimeString()
}
}
function stopX(){
window.clearInterval(intX) //注意!如果var intX定义在startX内,则无法清除!
}
</script>
setInterval 与 clearInterval详解的更多相关文章
- setTimeout和setInterval定时器使用详解测试
var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...
- 新手入门:史上最全Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- js实现的新闻列表垂直滚动实现详解
js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...
- Observable详解
Observable详解 rxjs angular2 在介绍 Observable 之前,我们要先了解两个设计模式: Observer Pattern - (观察者模式) Iterator Patte ...
- Day04 dom详解及js事件
day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证 上次课内容回顾: JS中ECMAScript用法: JS定义变 ...
- Day03 javascript详解
day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...
- 关于setTimeout()你所不知道的地方,详解setTimeout()
关于setTimeout()你所不知道的地方,详解setTimeout() 前言:看了这篇文章,1.注意setTimeout引用的是全部变量还是局部变量了,当直接调用外部函数方法时,实际上函数内部的变 ...
- 【Python全栈-JavaScript】JavaScript-字符串详解
JavaScript-字符串详解 预热:Number() 方法 <script> //重要等级 1,2,3,4,5 var s=10; //最高级别5 var s1=new Number( ...
随机推荐
- 快速上手日期插件daterangepicker
参数介绍: 参数 格式 示例 含义 startDate MM/DD/YYYY “startDate”:”10/14/2017” 设置默认的开始日期 endDate MM/DD/YYYY “endDat ...
- CF666E Forensic Examination SAM+线段树合并+前缀树倍增
$ \color{#0066ff}{ 题目描述 }$ 给你一个串\(S\)以及一个字符串数组\(T[1..m]\),\(q\)次询问,每次问\(S\)的子串\(S[p_l..p_r]\)在\(T[l. ...
- c++primer plus笔记
> 第六版 操作符重载 #include<iostream> using namespace std; class Time { public: Time() { h=m=0; } ...
- PIE SDK组件式开发综合运用示例
1. 功能概述 关于PIE SDK的功能开发,在我们的博客上已经分门别类的进行了展示,点击PIESat博客就可以访问,为了初学者入门,本章节将对从PIE SDK组件式二次开发如何搭建界面.如何综合开发 ...
- Vue.js 项目开发学习路线图
1. 思维导图 源文件:Vue路线图.xmind 参考文献 [1]. VueJs2.0建议学习路线 - lavyun - 博客园 [2]. Vue学习路线图 - 个人文章 - SegmentFault ...
- 使用Jmeter进行http接口性能测试(转载)
在进行网页或应用程序后台接口开发时,一般要及时测试开发的接口能否正确接收和返回数据,对于单次测试,Postman插件是个不错的Http请求模拟工具. 但是Postman只能模拟单客户端的单次请求,而对 ...
- c++第二次作业
1.函数重载编程练习编写重载函数add(),实现对int型,double型,Complex型数据的加法.在main()函数中定义不同类型数据,调用测试. #include<iostream> ...
- 记.net 遇到的几个bug
这两个bug都是查了挺久才查到的,随手记是个好习惯. 1.public static CultureInfo GetCultureInfo(string name); 方法,传参错误时,某些操作系统环 ...
- mysql编码不统一形成的错误
错误提示:[Err]1267 - Illegal mix of collations(utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) ...
- Java学习之路(二):Java中的方法
Java中的方法 概念: 为什么要有方法: 提高代码的复用性 什么是方法: 完成特定功能的代码块 格式: 修饰符 返回值类型 方法名(参数){ 方法体语句: return 返回值: } 1.修饰符:例 ...