深入理解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 相关文章推荐
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
js逆向解密之网络爬虫
May 30 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
node thread.sleep实现示例
2018/06/20 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
前端性能优化建议
2020/09/17 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python实现的彩票机选器实例
2015/06/17 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
关于numpy数组轴的使用详解
2019/12/05 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
计算机专业推荐信范文
2013/11/27 职场文书
挂职思想汇报
2013/12/31 职场文书
保证书范文大全
2014/04/28 职场文书
单位单身证明样本
2014/10/11 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
寒山寺导游词
2015/02/03 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电