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实现文本域写入字符时限定字数
Feb 12 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
js实现网页抽奖实例
Aug 05 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php中常用编辑器推荐
2007/01/02 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
python 多个参数不为空校验方法
2019/02/14 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
如何在sublime编辑器中安装python
2020/05/20 Python
几款好用的python工具库(小结)
2020/10/20 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
什么是View State?
2013/01/27 面试题
俄语专业职业生涯规划
2014/02/26 职场文书
感恩教育活动总结
2014/05/05 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
经营目标责任书
2015/05/08 职场文书
开学典礼观后感
2015/06/15 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
python 远程执行命令的详细代码
2022/02/15 Python