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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
Javascript动画效果(1)
Oct 11 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
多重?l件?合查?(二)
2006/10/09 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
pandas数据处理进阶详解
2019/10/11 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
UDP协议功能
2013/01/06 面试题
军训的自我鉴定
2013/12/10 职场文书
五好党支部事迹材料
2014/02/06 职场文书
买卖协议书范本
2014/04/21 职场文书
大学三年计划书范文
2014/04/30 职场文书
村党支部公开承诺书
2014/05/29 职场文书
社区两委对照检查材料
2014/08/23 职场文书
毕业横幅标语
2014/10/08 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
2014年测量员工作总结
2014/12/12 职场文书
罗马假日观后感
2015/06/08 职场文书
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript