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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
Javascript 强制类型转换函数
May 17 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
vue 虚拟DOM的原理
Oct 03 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP大神的十大优良习惯
2016/09/14 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
python request 模块详细介绍
2020/11/10 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
历史学专业推荐信
2013/11/06 职场文书
大四自我鉴定
2014/02/08 职场文书
项目经理聘任书
2014/03/29 职场文书
成绩单公证书
2014/04/10 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
教师工作总结范文2014
2014/11/10 职场文书
典型事迹材料范文
2014/12/29 职场文书
华清池导游词
2015/02/02 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python