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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JavaScript简易计算器制作
Jan 17 Javascript
探索node之事件循环的实现
Oct 30 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 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制作简单的内容采集器的原理分析
2008/10/01 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
python使用scrapy解析js示例
2014/01/23 Python
python如何生成网页验证码
2018/07/28 Python
python爬取指定微信公众号文章
2018/12/20 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Pandas之缺失数据的实现
2021/01/06 Python
三维科技面试题
2013/07/27 面试题
大学生旷课检讨书
2014/01/22 职场文书
30岁生日感言
2014/01/25 职场文书
新春联欢会主持词
2014/03/24 职场文书
党员个人对照检查材料
2014/10/01 职场文书
红旗渠导游词
2015/02/09 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python