JS中的间歇(周期)调用setInterval()与超时(延迟)调用setTimeout()相关总结
超时调用需要使用window.setTimeout(code,millisec)方法
它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒)。其中第一个参数可以是一个包含JS代码的字符串(就和在eval()函数中使用的字符串一样),也可以是一个函数。第二个参数表示等待多长时间的毫秒数,但经过该事件后指定的代码不一定会执行。
这是因为JS是一个单线程序的解释器,一定时间内只能执行一段代码,为了控制要执行的代码就有一个JS任务队列,这些任务会按照将他们添加到队列的顺序执行。
setTimeout()的第二个参数告诉JS再过多长时间把当前任务添加到队列中。若队列为空,这段添加的代码会立即执行,若不为空,就要等前面的代码执行完再执行。
//不建议传递字符串!可能会导致性能损失
setimeout("alert('hellow world!')",1000);
//推荐以匿名函数调用方式
var timeoutId = setTimeout(function(){
alert("hellow world!");
},1000); clearTimeout(timeoutId);
调用setTimeout()之后,该方法会返回一个数值ID,ID是计划执行代码的唯一标示符,可以通过clearTimeout(ID)来取消未执行的超时调用.
setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
间歇调用的方法是setInterval(),接受的第一个参数是要调用的函数或要执行的代码串。,第二个参数是周期性执行或调用 code 之间的时间间隔,以毫秒计。
调用setInterval()方法同样会返回一个ID,该ID可用于在将来某个时刻取消间歇调用。取消间歇调用的重要性要远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面卸载。
var num = 0,
max = 10,
intervalId = null;
function incrementNumber(){
num++;
if(num = = max){
clearInterval(intervalId);
alert("Done");
}
}
//以函数名调用方式
intervalId = setInterval(incrementNumber,500);
在开发环境中,很少使用真正的间歇调用,原因是后一个调用可能会在前一个调用结束之前启动(设置的周期时间millisec过短或函数代码code执行时间过长),所以最好不要使用间歇调用。
问题: JavaScript中setInterval传参常见的问题(setInterval第一个参数加引号与不加引号区别)
function fun() {
console.log("1");
}
setInterval("fun()",1000);//全局作用域下正常执行
setInterval(fun(),1000); //调用函数正常,setInterval调用出错
setInterval(fun,1000); //正确
setInterval(function(){ //匿名函数调用
console.log("1");
})
如例子中所示,setInterval 第一个参数 可以是函数名、匿名函数、函数的引用以及其他可执行代码。
setInterval("fun()",1000)
这种加引号的方式就可以理解为 可执行代码 就行eval() 一样去执行第一个参数,就是对fun方法的调用 理所当然的弹出 1 一秒钟间隔,一直执行。
setInterval(fun(),1000)
fun() 是对函数的直接调用,也就是说当setInterval还没有开始函数fun就执行了。如果这个函数没有返回值或者返回值不是可执行的函数或者其他的代码的话,就以上代码而言只是弹出一个1之后就停止了,这种方法无意义。
setInterval(fun,1000)
此时setInterval的第一个参数fun看作参数为 函数名或函数的引用。
我个人认为更推荐以匿名函数的方式调用最好。
JS中的间歇(周期)调用setInterval()与超时(延迟)调用setTimeout()相关总结的更多相关文章
- 熟悉JS中的常用选择器及属性、方法的调用
选择器.属性及方法调用的配合使用: <style> #a{ width: 200px; height: 1 ...
- js中setInterval与setTimeout用法
setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: ...
- js中setInterval与setTimeout用法 实现实时刷新每秒刷新
setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: ...
- JS中setInterval与setTimeout的区别
JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...
- JS里设定延时:js中SetInterval与setTimeout用法
js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...
- js中setTimeout和setInterval的应用方法(转)
JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...
- 微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
前段时间开发了一款微信小程序,运行了也几个月了,在index.js中的onLoad生命周期里获取app.js中onLaunch生命周期中在接口里动态设置的globalData一直没有问题,结果昨天就获 ...
- js 中关键字 this的用法
<1> js中this 的用法? (key:函数是由调用的,四种情况标红可知) (http://www.ruanyifeng.com/blog/2010/04/using_this_k ...
- JS中new到底发生了什么
outline prototype 与 __proto__ function 与 object new 到底发生了什么 prototype 与 __proto__ 首先说下在JS中比较容易让人困惑的 ...
随机推荐
- Android———从GitHub上下载源码的方法【Written By KillerLegend】
首先声明,本文说的是从GitHub上下载源码而非上传源码! 1:下载tortoisegit,下载地址为: https://code.google.com/p/tortoisegit/wiki/Down ...
- ace 读取excel
insert into T_BirdSystemSku(ID,Sku) select ID,SKU from OpenRowSet('Microsoft.ACE.OLEDB.12.0', 'Excel ...
- DevExpress 关于 GridView 表格编辑中 点击其他按钮里导致 值未取到处理
只需要给添加以下代码 在执行其他按钮前调 用一下 就可以了:主要是用来关闭编辑以及更新当前行编辑内容 this.gridControl1.FocusedView.CloseEditor(); this ...
- 009-python基础-数据类型-列表和元组
一.列表 在python中叫"列表",其他语言中成为"数组" 元素中可以存储字符串.数字甚至变量. 元素索引顺序从0开始. 例如 name_list[0] 就是 ...
- 与谷歌测试工程师的对话 - from Google Testing Blog
Conversation with a Test Engineer by Alan Faulner Alan Faulner谷歌的一名测试工程师,他工作在DoubleClick Bid Manager ...
- Datastage数据装载报错:Consumed more than 1000000 bytes looking for record delimiter
使用Datastage装载数据时报错如下图: 使用ds进行数据传输时,出现上述问题,最终找到了问题的原因: 我所使用的数据文件比较大,上传到服务器的时候传了80%就出现服务器存储空间不够,我删除以前的 ...
- c语言中通过指针将数值赋值到制定内存地址
1.一种直观的方法 假设现在需要往内存0x12ff7c地址上存入一个整型数0x100.我们怎么才能做到呢? 我们知道可以通过一个指针向其指向的内存地址写入数据,那么这里的内存地址0x12ff7c其本质 ...
- hdu 2035 人见人爱A^B
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2035 人见人爱A^B Description 求A^B的最后三位数表示的整数.说明:A^B的含义是“A ...
- 找到一个学习bootstrap的好网站
http://www.w3cschool.cc/bootstrap/bootstrap-css-overview.html
- Effective Objective-C 2.0之Note.01
1.在类的头文件中尽量少引入其他头文件 除非确有必要,否则不要引入头文件.一般来说,应在某个类的头文件中使用向前声明来提及别的类,并在实现文件中引入那些类的头文件.这样做可以尽量降低类之间的耦合(co ...