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 相关文章推荐
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
layui的select联动实现代码
Sep 28 Javascript
小程序实现录音功能
Sep 22 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 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获取文件内容最后一行示例
2014/01/09 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
python实现银行管理系统
2019/10/25 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
应届大专生求职信
2014/06/26 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书