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实现计算加载页面所用的时间
Apr 02 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
canvas实现探照灯效果
Feb 07 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
vue props 一次传多个值实例
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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python逆序打印各位数字的方法
2018/06/25 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
旅游管理实习自我鉴定
2013/09/29 职场文书
应届生煤化工求职信
2013/10/21 职场文书
施工安全协议书
2013/12/11 职场文书
工程负责人任命书
2014/06/06 职场文书
篮球比赛口号
2014/06/10 职场文书
大学生自荐信范文
2015/03/05 职场文书
2015年度保密工作总结
2015/04/24 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android