首先注意,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详解的更多相关文章

  1. setTimeout和setInterval定时器使用详解测试

    var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...

  2. 新手入门:史上最全Web端即时通讯技术原理详解

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  3. Web端即时通讯技术原理详解

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  4. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

  5. Observable详解

    Observable详解 rxjs angular2 在介绍 Observable 之前,我们要先了解两个设计模式: Observer Pattern - (观察者模式) Iterator Patte ...

  6. Day04 dom详解及js事件

    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证   上次课内容回顾: JS中ECMAScript用法: JS定义变 ...

  7. Day03 javascript详解

    day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...

  8. 关于setTimeout()你所不知道的地方,详解setTimeout()

    关于setTimeout()你所不知道的地方,详解setTimeout() 前言:看了这篇文章,1.注意setTimeout引用的是全部变量还是局部变量了,当直接调用外部函数方法时,实际上函数内部的变 ...

  9. 【Python全栈-JavaScript】JavaScript-字符串详解

    JavaScript-字符串详解 预热:Number() 方法 <script> //重要等级 1,2,3,4,5 var s=10; //最高级别5 var s1=new Number( ...

随机推荐

  1. P2540 斗地主增强版

    P2540斗地主增强版 参考大佬题解 思路:顺子暴力搜,剩下的牌我不会贪心所以用记忆化搜索(或者dp): 注意:双王不能当对,二不算顺子 代码 #include <cstdio> #inc ...

  2. Lecture notes of Mathematical analysis

    Lecture notes of Mathematical analysis Preliminary theory Teaching purpose: Mathematical analysis is ...

  3. python(unittest)报告导出(二):使用 BeautifulReport导出

    BeautifulReport(导出的报告比HTMLTestRunner更全面) 下载地址及安装位置 https://github.com/TesterlifeRaymond/BeautifulRep ...

  4. 「框架」菜鸟简单模仿一下spring的ioc和aop思想,欢迎大家进来阅读指教

    *博客搬家:初版发布于 2015/12/04 16:41    原博客地址:https://my.oschina.net/sunqinwen/blog/539397 spring最核心的部分莫过于io ...

  5. javascipt中数组的常见操作

    1.与lua不同,即使数组中间有null或者undefined,仍然能求出正确的长度 2.length 改变.length也会改变数组的大小 3. indexOf arr.indexOf(a)会返回第 ...

  6. 获取select标签选中的值

    js获取select标签选中的值 var obj = document.getElementById(”testSelect”); var index = obj.selectedIndex; var ...

  7. zabbix4.2 安装

    官网https://www.zabbix.com/cn/download a. 安装 数据库rpm -Uvh https://repo.zabbix.com/zabbix/4.2/rhel/7/x86 ...

  8. iphone手机拍照学习笔记

    大纲: 功能 理论 技巧 实战 一.功能 设置-相机可以打开网格. 短按屏幕.画面曝光切换. 长按调节曝光和聚焦,曝光有范围,取决于点选的地方. live photo可以拍出会动的照片,上划编辑,高速 ...

  9. J15W-J45W铜截止阀厂家,J15W-J45W铜截止阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 J15W-J45W铜截止阀 无极资讯网精心为您挑选了(J15W-J45W铜截止阀)信息,其中包含了(J15W-J45W铜截止阀)厂家,(J15 ...

  10. pip安装Python依赖环境

    将包依赖信息保存在requirements.txt文件 pip freeze > requirements.txt 根据依赖文件安装依赖 pip install -r requirements. ...