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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
js charAt的使用示例
Feb 18 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
JS实现li标签的删除
2019/04/12 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python绘制双柱形图代码实例
2017/12/14 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
Python pymsql模块的使用
2020/09/07 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
汽车维修专业自荐书
2014/05/26 职场文书
教师个人读书活动总结
2014/07/08 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python