JavaScript中setTimeout和setInterval的使用
相同点:这两个方法都可以用来实现在一个固定的时间之后去实现JavaScript代码,两个方法都包含有两个参数,第一个是将要执行的代码字符串,第二是以毫秒为单位的时间间隔,当过了这个时间间隔之后就会执行第一个参数中的代码字符串。
不同点:setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码。而setTimeout则仅仅是执行一次代码。
使用定时器调用带有参数的函数的时候直接为该函数的参数赋值形式如下:
一、采用字符串的形式:
1、window.setTimeout("alert('ok')",1000);
2、var msg="ok";
window.setTimeout("alertMsg(msg)",1000);
function alertMsg(pmsg)
{
alert(pmsg);
}
当我们调用的函数中含有定时器,并且需要通过该函数为定时器进行传值的时候该怎么办呢?这时我们需要使用类似以下形式的代码方能将参数传递给定时器。
function interval(msg)
{
setInterval("tip('"+msg+"')",1000);
}
function tip(msg)
{
alert(msg);
}
window.onload=function(){
var btnClick=document.getElementById("btnClick");
btnClick.onclick=function(){
interval("带有参数的定时器的使用");
}
}
此上两种方法用于传递字符串,无法用于传递对象。
二、采用匿名函数的形式:
setInterval(function(){resize(currentObj,nexObj);},2000);
resize(currentObj,nextObj){}
以上示例对于在传递的参数是对象的时候使用。
三、在有些情况下需在循环中使用,如:
window.onload=function(){
var a=[{id:1},{id:2},{id:3},{id:4}];
for(var i=0;i<3;i++){
setTimeout(function(){start(a[i])},1000);
}
}
function start(obj){ alert(obj.id);}
输出的结果都为 4。因为在一个函数体中,a和i相对于匿名函数是全局的,循环执行完后i=3,都执行start(a[3]),所以输出结果相同。这种情况怎么解决呢,只需把setTimeout封装到一个函数中即可
window.onload=function(){
var a=[{id:1},{id:2},{id:3},{id:4}];
for(var i=0;i<3;i++){
set(a[i]);
}
}
function set(obj){
setTimeout(function(){start(obj)},1000);
}
obj和匿名函数在同一作用域,所以在匿名函数中可以直接访问obj,而且每次执行setTimeout时都会产生新的匿名函数体和作用域,所以定时执行匿名函数时调用start并传值就不会出问题了。(此为个人的理解,不一定正确)
function
start(obj){ alert(obj.id);}
在网上看到有人封装了一个函数,也可实现该功能
var util={
setTimeout:function(fun, delay) {
if(typeof fun == 'function'){
var argu = Array.prototype.slice.call(arguments,2);
var f = (function(){
fun.apply(null, argu);
});
return window.setTimeout(f, delay);
}
return
window.setTimeout(fun,delay);
}
}
window.onload=function(){
var a=[{id:1},{id:2},{id:3},{id:4}];
for(var i=0;i<3;i++){
util.setTimeout(start,1000,a[i]);
}
}
注意:1、这里函数中的参数在定义的时候不能使用var关键字。
2、在为onclick事件绑定带有参数的函数的时候需要使用匿名函数调用绑定函数的形式。
待续……
JavaScript中setTimeout和setInterval的使用的更多相关文章
- Javascript中setTimeout和setInterval的区别和使用
在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...
- JavaScript中setTimeout()和setInterval()的区别
含义: setTimeout()和setInterval()经常被用来处理延时和定时任务.使用setTimeout()处理延时任务,而使用setInterval()方法处理定时任务: setTimeo ...
- 【转】JS中setTimeout和setInterval的最大延时值详解
前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...
- Javascript的setTimeOut()和setInterval()的定时器用法
Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...
- JavaScript的setTimeout和setInterval的深入理解
发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...
- JavaScript 关于setTimeout与setInterval的小研究
说明 在开发功能"轨迹播放"时,遇到了一个情况. 原先同事已经开发了一版,这次有个新功能:点击线上任意一点后可以从点击处重新播放. 看了一下原来的版本,发现同时使用了setTime ...
- JS中SetTimeOut和SetInterval方法的区别?
1.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 ...
- JavaScript———从setTimeout与setInterval到AJAX异步
setTimeout与setInterval执行 首先我们看一下以下代码打印结果 console.log(1); setTimeout(function() { console.log(2); },1 ...
- Node.js中setTimeout和setInterval的使用
Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInter ...
随机推荐
- OpenCV——无法启动此程序,丢失**解决办法
OpenCV程序运行时,有时出现以下错误: 解决方法: 在opencv安装目录下找到这个链接库,将其复制到以下指定目录中 我的链接库目录为:E:\Program files\opencv\build\ ...
- CF 13E Holes 【块状链表】
题目描述: 一条直线上n个点,每个点有个“弹力”,可以把当前位置x上面的ball弹到x+a[x]上面. 两种操作 0. 修改a处的弹力值,编程b 1. 询问a点的ball经过多少次能跳出n个点外(就是 ...
- Linux的用户和用户组
/etc/group 文件存储了所有的用户和用户组信息 存储格式: 组名:组密码占位符:组编号:组中所有用户 root:x:0: mail:x:12:postfix ... 说明: root: ...
- 轻量级jquery框架之--树(tree)
前言 在常用的UI组件中,树形组件与数据列表组件可以说是构成一个管理平台基本的两大数据核心组件.树形组件用于系统菜单,数据列表用于数据表现,两者配合即可完成一个简单的数据系统.要实现一个支持复选.工具 ...
- 函数内声明变量不加var和加var的区别
这段代码说明了在函数中声明没加var关键字的变量时,会出现什么结果. 分两种不同的情况: 1.如果函数内没有同名的局部变量覆盖“无var变量”,那么它就是个全局变量,在函数外部也可以访问到 ...
- EditText判断用户输入完成,然后进行操作解决方案
private Timer timer = new Timer(); private final long DELAY = 1000; // in ms EditText editTextStop = ...
- [C++程序设计]返回指针值的函数
定义指针函数的一般形式为 类型名 *函数名(参数表列); 例如 int *a(int x,int y);
- GitLab CI
GitLab CI持续集成配置方案 目录 1. 持续集成介绍 1.1 概念 1.2 持续集成的好处 2. GitLab持续集成(CI) 2.1 简介 2.2 GitLab简单原理图 2.3 Git ...
- 动态PDF在线预览
实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...
- Log4j之properties配置文件详解
Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式.日志信息的优先级从高到低有ERROR.WARN. INFO.DEBUG,分别用来指定这条日志信息的重要程度: ...