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 表单验证常见正则
Sep 28 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP中的CMS的涵义
2007/03/11 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
python定时关机小脚本
2018/06/20 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
大学班级干部的自我评价分享
2014/02/10 职场文书
学生打架检讨书
2014/02/14 职场文书
教师考核鉴定意见
2015/06/05 职场文书
python爬虫--selenium模块
2021/03/31 Python
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android