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 相关文章推荐
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
javascript截取字符串小结
Apr 28 Javascript
JavaScript模拟push
Mar 06 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
微信小程序动态设置图片大小的方法
Nov 21 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 5.3.5安装memcache注意事项小结
2011/04/12 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python 字符串中的字符倒转
2008/09/06 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
python中return不返回值的问题解析
2020/07/22 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
社会实践心得体会
2014/01/03 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
总经理任命书范本
2014/06/05 职场文书
语文教师个人工作总结
2015/02/06 职场文书
学雷锋日活动总结
2015/02/06 职场文书
世界红十字日活动总结
2015/02/10 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers