相同点:这两个方法都可以用来实现在一个固定的时间之后去实现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的使用的更多相关文章

  1. Javascript中setTimeout和setInterval的区别和使用

    在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...

  2. JavaScript中setTimeout()和setInterval()的区别

    含义: setTimeout()和setInterval()经常被用来处理延时和定时任务.使用setTimeout()处理延时任务,而使用setInterval()方法处理定时任务: setTimeo ...

  3. 【转】JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...

  4. Javascript的setTimeOut()和setInterval()的定时器用法

    Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...

  5. JavaScript的setTimeout和setInterval的深入理解

    发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...

  6. JavaScript 关于setTimeout与setInterval的小研究

    说明 在开发功能"轨迹播放"时,遇到了一个情况. 原先同事已经开发了一版,这次有个新功能:点击线上任意一点后可以从点击处重新播放. 看了一下原来的版本,发现同时使用了setTime ...

  7. JS中SetTimeOut和SetInterval方法的区别?

    1.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 ...

  8. JavaScript———从setTimeout与setInterval到AJAX异步

    setTimeout与setInterval执行 首先我们看一下以下代码打印结果 console.log(1); setTimeout(function() { console.log(2); },1 ...

  9. Node.js中setTimeout和setInterval的使用

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInter ...

随机推荐

  1. I/O多路复用之select

    1.什么是I/O多路复用 关于什么是I/O多路复用,在知乎上有个很好的回答,可以参考罗志宇前辈的回答. 这里记录一下自己的理解.我认为要理解这个术语得从两方面去出发,一是:多路是个什么概念?二是:复用 ...

  2. [原创]VS2010中创建动态链接库及其调用

    [原创]VS2010中创建动态链接库及其调用 一.创建动态链接库 在VS2010中创建动态链接库的步骤如下: 1)生成->编译->生成MyDll 二.调用 当调用DLL中的方法,程序编译产 ...

  3. jira汉化

    https://translations.atlassian.com/dashboard/dashboard 下载汉化jar文件,在jira中上传插件,系统设置中文即可 LOFTER:我们的故事    ...

  4. python 在linux下通过top,和dh命令获得cpu,内存,以及硬盘信息

    主要是通过os.popen读取命令输出实现的,os.popen启动新的进程,且将外部命令的输出作为文件类型对象返回.不能获得外部命令的返回值.既然是文件对象就可以直接用for in 来读取,代码如下: ...

  5. 从几个sample来学习JAVA堆、方法区、JAVA栈和本地方法栈

    最近在看<深入理解Java虚拟机>,书中给了几个例子,比较好的说明了几种OOM(OutOfMemory)产生的过程,大部分的程序员在写程序时不会太关注Java运行时数据区域的结构: 感觉有 ...

  6. 异常处理与调试5 - 零基础入门学习Delphi54

    调试(Debug) 让编程改变世界 Change the world by program [caption id="attachment_2731" align="al ...

  7. WPF笔记(1.2 Navigation导航)——Hello,WPF!

    原文:WPF笔记(1.2 Navigation导航)--Hello,WPF! 这一节是讲导航的.看了一遍,发现多不能实现,因为版本更新了,所以很多旧的语法不支持了,比如说,不再有NavigationA ...

  8. perl HTML::TreeBuilder::XPath

    HTML::TreeBuilder::XPath 添加XPath 支持HTML::TreeBuilder use HTML::TreeBuilder::XPath;   my $tree= HTML: ...

  9. Linux系统编程(6)——文件系统

    计算机的文件系统是一种存储和组织计算机数据的方法,它使得对其访问和查找变得容易,文件系统使用文件和树形目录的抽象逻辑概念代替了硬盘和光盘等物理设备使用数据块的概念,用户使用文件系统来保存数据不必关心数 ...

  10. easyui 表单验证validatetype——支持自定义验证

    easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: 代码 Code highlighting produced by Actipro C ...