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 相关文章推荐
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
JS中数组重排序方法
Nov 11 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python单元测试实例详解
2018/05/25 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
Python发展简史 Python来历
2019/05/14 Python
表达自我的市场:Society6
2018/08/01 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
大学校园生活自我鉴定
2014/01/13 职场文书
运动会跳远广播稿
2014/02/04 职场文书
学生会干部自荐信
2014/02/04 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
移风易俗倡议书
2014/04/15 职场文书
初中作文评语大全
2014/04/23 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
MySql分区类型及创建分区的方法
2022/04/13 MySQL
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技