定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval()函数的语法如下:

setInterval ( code, milliseconds[, args...] )

参数 描述
code 需要执行的函数或js代码
milliseconds 执行函数或代码的间隔时间,单位为毫秒
args 可选参数用于给被调用的函数传递参数,参数可以有多个
返回值

setInterval()函数将返回一个标识符 ID,这个 ID 是唯一的(一般是整数,从 1 开始,每调用一次 setInterval() 就加 1)。

如果需要 setInterval() 执行的函数或代码尚未执行,我们可以通过 clearInterval() 函数来取消该执行操作,clearInterval() 需要接收一个参数,这个参数就是 setInterval() 返回的标识符ID。

如果参数code执行的是一个函数则可以直接使用函数名称或者匿名函数作为参数。如果函数需要参数,我们可以通过setInterval()的可选参数为其传递相应的参数。

//该函数不需要参数
function test(){
    alert("测试");
}
// 每隔5秒钟就弹出提示信息"测试"。
setInterval(test, 5000); // 使用匿名函数作为参数,每隔5秒钟就输出控制台信息"测试2"。
setTimeout(function(){
    console && console.log("测试2");  
}, 5000); // 该函数需要两个参数
function sayHello(name, age){
    alert("我叫" + name + ",今年" + age + "岁!");
}
//每隔5秒钟就弹出提示信息"我叫CodePlayer,今年18岁!"。
setInterval(sayHello, 5000, "CodePlayer", 18);

我们可以使用clearInterval()函数来取消setInterval()设定的定时操作。

function test(){
    alert("测试");
} // 每隔5秒钟就弹出提示信息"测试"。
var intervalID = setInterval(test, 5000); // 取消该定时设置
clearInterval(intervalID);

此外,请一定注意:setInterval()的定时代码是在全局作用域下执行的,因此你不能在定时代码中调用某些局部变量,否则可能会报错。

// 以下是错误的用法,setInterval的定时代码无法调用局部变量site
function foo(){
    var site = "CodePlayer";
    setInterval('alert(site);', 5000);  
}
foo(); var x = 15;
function bar(){
    var x = 18;
    setInterval('alert(x);', 5000); // 15
}
// 由于setInterval的定时代码是在全局作用域下执行的,因此这里的x为15
bar();

你可以通过以下方法来间接解决上述作用域问题:

// 省略var修饰符,使用全局变量代替局部变量
function foo1(){
    site = "CodePlayer 1";
    setInterval('alert(site);', 5000);  
}
foo1(); // 不使用变量,直接传递变量的值
function foo2(){
    var site = "CodePlayer 2";
    setInterval('alert("' + site + '");', 5000);
}
foo2(); // 延长作用域链,使其能够访问到该函数作用域
function foo3(){
    var site = "CodePlayer 3";
    setInterval(function(){
        alert(site);
    }, 5000);  
}
foo3(); // 调用指定的函数,并给函数传递相应的参数
function callback(msg){
    alert(msg);
}
function foo4(){
    var site = "CodePlayer 4";
    setInterval(callback, 5000, site);  
}
foo4();

JavaScript之setInterval() 函数的更多相关文章

  1. JavaScript中setInterval函数应用常见问题之一(第一个参数不加引号与加引号的区别)

    学过JavaScript 脚本语言的都应该接触过setInterval 函数.如何使用我想大家都知道,但是有时候对于刚刚接触JavaScript的朋友来讲,还是会在使用的时候碰到这样或那样的问题而感到 ...

  2. 【JavaScript】使用setInterval()函数作简单的轮询操作

    轮询(Polling)是一种CPU决策怎样提供周边设备服务的方式,又称"程控输出入"(Programmed I/O). 轮询法的概念是.由CPU定时发出询问.依序询问每个周边设备是 ...

  3. 什么是setTimeout函数和setInterval函数?

    我们一般在浏览网页的时候,一般都会有图片轮播等,一些比较好玩的特效,接下来我就给大家讲讲这俩个函数! 一setTimeout函数和setInterval函数的语法以及应用 1.setTimeout函数 ...

  4. javascript(定时函数)

    一setTimeout函数和setInterval函数的语法以及应用 1.setTimeout函数 定义和用法:setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法:setTi ...

  5. 浅谈setTimeout函数和setInterval函数

    前几天学了js,看到了两个非常有趣的函数,他们分别是setTimeout函数和setInterval函数,这两个函数能使网页呈现非常一些网页中比较常见的效果,比如说图片轮播,等一些非常好玩的效果.下面 ...

  6. Javascript之回调函数(callback)

    1.回调函数定义: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方 ...

  7. JavaScript高级之函数的四种调用形式

    主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...

  8. JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeou ...

  9. JavaScript中的函数:闭包,this,高阶函数

    一.函数基本理论 function compare(val1,val2){ return val1 - val2; }var result = compare(5,10); 1,函数的定义没什么意义, ...

随机推荐

  1. Codeforces 864E dp

    题意: 房间着火了,里面有n件物品,每件物品有营救需要的时间t,被烧坏的最晚时间d,他的价值p,问能得到的最大价值,并且输出营救出来的物品编号 代码: //必然是先救存活时间短的即d小的,所以先排个序 ...

  2. 10个有关String的面试问题

    下面是面试中最容易问到的有关String的问题. 1. 如何比较两个字符串?使用"=="还是equals()方法? 简单来讲,"=="测试的是两个对象的引用是否 ...

  3. ZOJ 3774 Fibonacci的K次方和

    In mathematics, Fibonacci numbers or Fibonacci series or Fibonacci sequence are the numbers of the f ...

  4. 【BZOJ】4033: [HAOI2015]树上染色 树上背包

    [题目]#2124. 「HAOI2015」树上染色 [题意]给定n个点的带边权树,要求将k个点染成黑色,使得 [ 黑点的两两距离和+白点的两两距离和 ] 最大.n<=2000. [算法]树上背包 ...

  5. NYOJ 138 找球号(二) (哈希)

    题目链接 描述 在某一国度里流行着一种游戏.游戏规则为:现有一堆球中,每个球上都有一个整数编号i(0<=i<=100000000),编号可重复,还有一个空箱子,现在有两种动作:一种是&qu ...

  6. 解决pl/sq可视化工具的中文乱码问题

    解决pl/sql中文乱码问题 问题:pl/sql的中文都显示为“?”,怎么能显示成中文呢? 1.  执行sql语句 select * from V$NLS_PARAMETERS NLS_LANGUAG ...

  7. 遍历目录大小——php经典实例

    遍历目录大小——php经典实例 <?php function dirSize($dir){ //定义大小初始值 $sum=; //打开 $dd=opendir($dir); //遍历 while ...

  8. 蓝色的cms网站后台管理模板——后台

    链接:http://pan.baidu.com/s/1c138cwC 密码:9vy9

  9. 短信API——短信验证码

    简介 短信服务(Short Message Service.SMS)是指通过调用短信发送API,将指定短信内容发送给指定手机用户. 阿里云短信服务 阿里云短信服务产品介绍:https://www.al ...

  10. LAMP结合discuz论坛的配置

    一.安装discuz ---->//download discuz; [root@localhost ~]# mkdir /data/www [root@localhost ~]# cd /da ...