深入理解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 相关文章推荐
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
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
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
node.js中watch机制详解
2014/11/17 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
Python实现的彩票机选器实例
2015/06/17 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
对python 调用类属性的方法详解
2019/07/02 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
python3下pygame如何实现显示中文
2020/01/11 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
JSF界面控制层技术
2013/06/17 面试题
单位介绍信范文
2014/01/18 职场文书
卫生巾广告词
2014/03/18 职场文书
个人收入证明格式
2015/06/24 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
导游词之神仙居景区
2019/11/15 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
Python面试不修改数组找出重复的数字
2022/05/20 Python