JavaScript setTimeout和setInterval的使用方法 说明

时间:2023-08-31 10:48:19 

不同的是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);
}
标签:setTimeout,setInterval
0
投稿

猜你喜欢

  • python实现AES算法及AES-CFB8加解密源码

    2022-06-14 01:24:01
  • python re.match函数的具体使用

    2023-07-31 13:16:28
  • Python数据分析之 Pandas Dataframe合并和去重操作

    2022-12-31 07:11:59
  • 跟老齐学Python之变量和参数

    2023-01-12 22:23:31
  • 基于Python实现绘制属于你的世界地图

    2021-11-30 16:55:50
  • OpenCV半小时掌握基本操作之色彩空间

    2021-01-05 05:27:31
  • pytorch 常用函数 max ,eq说明

    2023-06-25 11:09:21
  • 如何关掉pycharm中的python console(图解)

    2023-01-28 05:54:35
  • Pandas中把dataframe转成array的方法

    2023-07-05 11:44:34
  • vue-loader和webpack项目配置及npm错误问题的解决

    2024-04-29 13:10:33
  • jsp中select的onchange事件用法实例

    2024-04-19 09:58:23
  • Hibernate 的原理与配置

    2023-07-20 21:26:52
  • ORACLE常见错误代码的分析与解决三

    2010-07-26 13:28:00
  • 浅谈Python 递归算法指归

    2023-01-12 06:27:50
  • Mysql复合主键和联合主键的区别解析

    2024-01-24 04:57:42
  • 解决Pytorch自定义层出现多Variable共享内存错误问题

    2023-12-14 14:43:46
  • 分享JavaScript与Java中MD5使用两个例子

    2024-05-22 10:40:17
  • Vue.js学习之过滤器详解

    2024-05-09 10:40:38
  • 常见Dreamweaver使用过程中的问题及解决办法

    2011-03-17 16:16:00
  • python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能

    2021-12-29 06:55:13
  • asp之家 网络编程 m.aspxhome.com