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 相关文章推荐
在vs2010中调试javascript代码方法
Feb 11 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
js实现多图左右切换功能
Aug 04 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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中加密解密函数与DES加密解密实例
2014/10/17 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
js实现分页功能
2017/05/24 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python 寻找局部最高点的实现
2019/12/05 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
英语专业学生个人求职信范文
2014/01/06 职场文书
主题婚礼策划方案
2014/02/10 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript