JavaScript setTimeout和setInterval的使用方法 说明

转载  更新时间:2010年03月25日 20:14:55   作者:   我要评论

两个函数都是可以用来实现一段时间后执行一段javascript代码的效果。两个函数都有两个参数,前面的都是执行表达式,后面的是隔的秒数。
不同的是setInterval会每隔指定的时间段就执行一次代码,具有重复性。而setTimeout只会调用后执行一次。
下面通过函数的建立和函的自动删除来深刻理解两个函数;
1.函数的建立
setTimeOut的建立:
复制代码 代码如下:

showTime();
function showTime()
{
var today = new Date();
alert("The time is: " + today.toString());
setTimeout("showTime()", 5000);
}

调用函数后五秒钟才会执行一次showtime函数
setInterval的建立
复制代码 代码如下:

setInterval("showTime()", 5000);
function showTime()
{
var today = new Date();
alert("The time is: " + today.toString());
}

总结:貌似两个函数的结果相似,其实不然第二个函数会反复的报时,直到该网页被关闭。
两个函数的消除:
setTimeout的消除使用
clearTimeout()函数;调用的实例:
复制代码 代码如下:

var timeoutProcess = setTimeout("alert('GOAL!')", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);//加入事件函数,参数为(目标;事件;调用的函数;是否冒泡)
function stopGoal()
{
clearTimeout(timeoutProcess);
}

setInterval的消除
复制代码 代码如下:

var timeoutProcess = setTimeout("alert('GOAL!')", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);//加入事件函数,参数为(目标;事件;调用的函数;是否冒泡)
function stopGoal()
{
clearInterval(timeoutProcess);
}

相关文章

  • js与运算符和或运算符的妙用

    js与运算符和或运算符的妙用

    这篇文章主要介绍了js与运算符和或运算符的使用方法,需要的朋友可以参考下
    2014-02-02
  • 监控 url fragment变化的js代码

    监控 url fragment变化的js代码

    url 里面的 #后面的部分 可以实现无刷新的改变url 的值。这个特点非常有用。比如视频网站土豆中的豆单,你进入视频列表以后,点击播放某个视频。
    2010-04-04
  • javascript 嵌套的函数(作用域链)

    javascript 嵌套的函数(作用域链)

    当你进行函数的嵌套时,要注意实际上作用域链是发生变化的,这点可能看起来不太直观。你可把下面的代码置入firebug监视值的变化。
    2010-03-03
  • JavaScript和jQuery制作光棒效果

    JavaScript和jQuery制作光棒效果

    本文主要介绍了使用javaScript和jQuery制作光棒效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 原生js实现秒表计时器功能

    原生js实现秒表计时器功能

    这篇文章主要为大家详细介绍了原生js实现秒表计时器功能,可以开始、暂停、清除,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JavaScript从数组的indexOf()深入之Object的Property机制

    JavaScript从数组的indexOf()深入之Object的Property机制

    这篇文章主要介绍了JavaScript从数组的indexOf()深入——Object的Property机制的相关资料,需要的朋友可以参考下
    2016-05-05
  • js如何取消事件冒泡

    js如何取消事件冒泡

    事件冒泡是什么意思这里就不为大家一一赘述了,下面为大家讲解的是js中如何取消事件冒泡,感兴趣的朋友可以参考下
    2013-09-09
  • 完美实现八种js焦点轮播图(下篇)

    完美实现八种js焦点轮播图(下篇)

    这篇文章主要介绍了完美实现八种js焦点轮播图的具体代码,基于完美运动框架move2.js实现的焦点录播图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • js获得鼠标的坐标值的方法

    js获得鼠标的坐标值的方法

    js获得鼠标的坐标值的方法,需要的朋友可以参考一下
    2013-03-03
  • js判断60秒以及倒计时示例代码

    js判断60秒以及倒计时示例代码

    本篇文章主要是对js判断60秒以及倒计时的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论