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 特殊字符
Apr 05 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 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来改写404错误页让你的页面更友好
2013/01/24 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
javascript静态的url如何传递
2007/05/03 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
node.js中的require使用详解
2014/12/15 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
幼儿园百日安全活动总结
2015/05/07 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
小学主题班会教案
2015/08/17 职场文书
高中物理教学反思
2016/02/19 职场文书
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript