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不同页面传值的改进版
Sep 30 Javascript
js变量以及其作用域详解
Jul 18 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
JavaScript中数组去重的5种方法
Jul 04 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
图形数字验证代码
2006/10/09 PHP
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
js计算页面刷新的次数
2009/07/20 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
numpy.random模块用法总结
2019/05/27 Python
用python做游戏的细节详解
2019/06/25 Python
深入了解Django View(视图系统)
2019/07/23 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
python十进制转二进制的详解
2020/02/07 Python
为什么group by 和order by会使查询变慢
2014/05/16 面试题
求职简历推荐信范文
2013/12/02 职场文书
校园活动策划方案
2014/06/13 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
导游词欢迎词
2015/02/02 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS