JavaScript两种计时器的实例讲解


Posted in Javascript onJanuary 31, 2019

通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。提供了两种计时器的方法如下:

  1. window.setInterval(); 这个方法就是在一个周期内反复执行一直到窗口关闭或者 clearInterval()
  2. window.setTimeout(); 延迟执行内容

setInterval()的使用方法: 

setInterval(code,millisec);
  • code:可以是方法名,如果是方法不要加小括号。同时也可以是字符串用双引号将方法括起来。setInterval(“setCode()”,1000);或者setInterval(setCode,1000); 
  • millisec:是毫秒数,就是隔了多久执行

代码如下:

var p1 = document.getElementById("p");
  var n = 0;
  var data = ["4234","343440"];
  var rows = 0;
  var cols = 0;
  function setCode(){
    if(cols < data[rows].length){
      p1.innerHTML += data[rows][cols];
      cols++;
    }else if(rows < data.length){
      p1.innerHTML += "</br>";
      rows++;
      cols = 0;
    }else {
      clearInterval(timer);
    }
  }
  var timer = setInterval(setCode,500);

setTimeout和setInterval用法是一样的的。

那么在计时器中能否传递参数呢?答案是不能的那么怎么办呢,推荐使用匿名函数。

代码如下:

var person = {name: "peng", age: 23};
  function getPerson(person){
    alert(person.name);
  }
  var timer = setInterval(function(){
    getPerson(person);
  },1000);

就是在定义定时器是在重新写一个函数在函数里面去调用方法。

当然也可以直接将函数和参数用“”括起来 ,但是这样不能周期性改变参数的值.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
JavaScript对JSON数组简单排序操作示例
Jan 31 #Javascript
实例讲解v-if和v-show的区别
Jan 31 #Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 #Javascript
Angular PWA使用的Demo示例
Jan 31 #Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 #Javascript
微信小程序开发的基本流程步骤
Jan 31 #Javascript
JSON的parse()方法介绍
Jan 31 #Javascript
You might like
mysql 性能的检查和优化方法
2009/06/21 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP CURL使用详解
2019/03/21 PHP
JavaScript库 开发规则
2009/01/31 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
发布你的Python模块详解
2016/09/15 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Python常见字典内建函数用法示例
2018/05/14 Python
PyQt5响应回车事件的方法
2019/06/25 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
西部世纪面试题
2014/12/05 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
基层干部十八大感言
2014/01/19 职场文书
小学生操行评语
2014/04/22 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
师范毕业生求职信
2014/07/11 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Python学习之os包使用教程详解
2022/03/21 Python
Python代码实现双链表
2022/05/25 Python