深入理解setTimeout函数和setInterval函数


Posted in Javascript onMay 20, 2016

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

一setTimeout函数和setInterval函数的语法以及应用

1.setTimeout函数

定义和用法:setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

语法:setTimeout(code,millisec);

参数:

code (必需):要调用的函数后要执行的 JavaScript 代码串。

millisec(必需):在执行代码前需等待的毫秒数。

提示:

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

返回值

一个可以传递给 Window.clearTimeout() 从而取消对 code 的周期性执行的值。

既然setTimeout是一个定时器函数,那么就有一个一个函数来清理定时器,那我们就用到了clearTimeout函数。

clearTimeout(setTimeout()返回的ID值);

2.setInterval定义

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

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

语法

setInterval(code,millisec[,"lang"]);

参数code必需。要调用的函数或要执行的代码串。

millisec必须。周期性执行或调用 code 之间的时间间隔,以毫秒计

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

既然setTimeout是一个定时器函数,那么就有一个一个函数来清理定时器,那我们就用到了clearInterval()函数。

clearInterval()(setInterval()返回的ID值);

二.案例:

倒计时效果

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>倒计时效果</title>
  <script type="text/ecmascript">
    //使用js方式实现倒计时效果
    var t1;
    window.onload = function () {
     
      //01定位到开始按钮返回一个dom对象
      var btns = document.getElementById('btnStart');
      //02.给开始按钮注册单击事件
      btns.onclick = function () {
        //执行ssetInerval函数第一个参数要定时执行的函数,第二个参数该函数每个多少毫秒执行一次
        t1= setInterval(start, 1000);

      }
      //03定位到停止按钮返回一个dom对象
      var btnst = document.getElementById('btnStop');
      btnst.onclick = function () {
        clearInterval(t1);
      }
    }
    //要隔1秒执行的函数
    function start() {
      //01.获取div中的文本赋值给一个变量
      var divdom = document.getElementById('msg');
      var divnum = divdom.innerText;
      //判断divnum的值是否为0
      if (divnum > 0) {
        divnum--;
        //把减过的值重新赋值给divnum
        divdom.innerText = divnum;
      }
    }
  </script>
</head>
<body>
  <input type="button" id="btnStart" value="开始" />
  <input type="button" id="btnStop" value="停止" /><br />
  <div id="msg">10</div>

</body>
</html>

背景图片切换:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript">
    var count = 1;//定义初始变量默认为第一张图片
    window.onload = function () {
      //使用定时器函数每隔一秒定义执行一次show函数
      setInterval(show,1000);
    }
    //要执行的函数
    function show() {
      //如果图片到达最后一张(5张),就将下一张显示的图片改为第一张,如果没有到达最后一张就将显示下一张图片
      if (count > 5) {
        count = 1;
      }
      else {
        count++;
      }
      //获取id为myimg的dom对象
      var dom = document.getElementById("myimg");
      //改变img标签的src属性指向,改变图片
      dom.src = "image/"+count+".jpg"
    }

  </script>
</head>
<body>
  <img src="image/1.jpg" alt="Alternate Text" width="200px" height="200px" id="myimg" />
</body>
</html>

点名器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript">
    //定义一个数组保存该点名器中的基本数据
    var data = ['张三', '李四', '王二', '小陈', '小张'];
    var i = 0;//声明一个初始变量默认让第一个人显示在页面上
    var t1;
    window.onload = function () {
      //02.获取开始点名按钮的dom对象给该对象注册单击事件
      var dom = document.getElementById("mybtn");
      dom.onclick = function () {
        //使用setInterval函数隔500毫秒调用一次result函数
        t1 = setInterval(start, 500);
        //该方法隔6秒他只调用一次
        setTimeout(stop,6000);
      }
      //定义一个匿名函数把他赋值给一个变量result
       var start= function() {
        //03获取h1标签对象,给h1标签的文本赋值
        var domh = document.getElementById("myh1");
        domh.innerText = data[i % data.length];//替换已存在,元素值
        i++;
       }
      //调用匿名函数
       start();
       var stop = function () {
         //清除定时器
         clearInterval(t1);
         //弹出提示框点到的同学请作答
         alert("请" + document.getElementById("myh1").innerText+"同学作答");
       }
      
    }
</script>
</head>
<body>
  <h1 id="myh1"></h1>
<button id="mybtn"> 开始点名</button>

</body>

</html>

通过上面的几个案例,我相信大家一点对这两个函数应该不陌生了。

以上这篇深入理解setTimeout函数和setInterval函数就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
js常用正则表达式集锦
May 17 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
JavaScript基础教程——入门必看篇
May 20 #Javascript
jQuery选择器及jquery案例详解(必看)
May 20 #Javascript
Jquery $when done then的用法详解
May 20 #Javascript
jQuery添加和删除输入文本框标签代码
May 20 #Javascript
jQuery通过deferred对象管理ajax异步
May 20 #Javascript
Bootstrap3学习笔记(三)之表格
May 20 #Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 #Javascript
You might like
使用 php4 加速 web 传输
2006/10/09 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
利用Psyco提升Python运行速度
2014/12/24 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
政府门卫岗位职责
2014/04/29 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
暖春观后感
2015/06/08 职场文书