实现一个打点计时器,要求
1、从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 1
2、返回的对象中需要包含一个 cancel 方法,用于停止定时操作
3、第一个数需要立即输出

* 使用setTimeout方法

var timer;

function count(start, end) {
if (start <= end) {
console.log(start);
start++;
timer = setTimeout(function() {
count(start, end);
}, 100);
} return {
cancel: function() {
clearTimeout(timer);
}
}
}

 

* 使用setInterval方法

function count(start, end) {
console.log(start++);
var timer = setInterval(function() {
start <= end ? console.log(start++) : clearInterval(timer);
}, 100);
return {
cancel: function() {
clearInterval(timer);
}
}
}

  

javascript 定时器 timer setTimeout setInterval (js for循环如何等待几秒再循环)的更多相关文章

  1. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  2. Javascript定时器(三)——setTimeout(func, 0)

    setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...

  3. JavaScript定时器:setTimeout()和setInterval()

    1 超时调用setTimeout() 顾名思义,超时调用的意思就是在一段实际之后调用(在执行代码之前要等待多少毫秒) setTimeout()他可以接收两个参数: 1 要执行的代码或函数 2 毫秒(在 ...

  4. js 定时器(setTimeout/setInterval)出现变量未定义(xxx is not defined) 的解决方法

    首先声明本人资质尚浅,如有错误,欢迎指正.共同提高. ------------------------------------------------------------------------- ...

  5. 定时器相关 setTimeout setInterval 函数节流

    这个问题也是在参加百度的前端技术学院中遇到的 任务中需要用js实现动画  导师给的评价中setInterval会导致bug 当时不理解   下面把自己学习的过程分享出来 再次理解单线程   老是说js ...

  6. JavaScript定时器(Timer)

    版权声明:本文为博主原创文章,未经博主允许不得转载.https://www.cnblogs.com/gaoguowen/p/11119088.html 什么是定时器 简单来说就是在一段时间间隔后执行一 ...

  7. js中setTimeout/setInterval定时器用法示例

    js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...

  8. js setTimeout 与 setInterval 以及 for 循环 刷新UI

    1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式:执行一次: 如果需要执行多次,自身再次调用 setTimeout(): 示例:无穷循环并带停止按钮的 <html&g ...

  9. javascript定时器:setTimeout与setInterval

    概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...

随机推荐

  1. vue项目中踩过的element的坑

    前言:在现在这种大的社会背景下,人们的需求更加的个性化了,而之前为了解放开发复杂的原生开发状态,现有的组件库已经远远不能满足人们高质量的需求了,这两天开发发现了一些element UI交互上的缺陷,当 ...

  2. 理解js运行时的一些概念

    帧:一个帧是一个连续的工作单元.当一个js函数被调用时,运行时环境就会在栈中创建一个帧.帧里保存了特殊的函数参数和局部变量.当函数返回时,帧就被从栈中推出.例如: function foo(b) { ...

  3. SQL Server中的distinct(不允许重复)

    参考网址:https://blog.csdn.net/tswc_byy/article/details/81835023 一.建库和建表create database scortuse scortcr ...

  4. C++ CLI简介(什么是C++ CLI)

    要知道C++/CLI是什么,首先知道什么是CLI. 一.CLI简介 CLI:(Common Language Infrastructure,通用语言框架)提供了一套可执行代码和它所运行需要的虚拟执行环 ...

  5. QT5学习:分割窗口类的使用

    分割窗口在应用程序中经常用到,它可以灵活分布窗口布局,经常用于类似文件资源管理器的窗口设计中,然后抱着这样的想法简单的实现了下 [cpp]  view plain copy   //main.cpp ...

  6. POI实现excel的导入导出

    引入依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</arti ...

  7. GPIO引脚速度的应用匹配

    GPIO 引脚速度: GPIO 引脚速度又称输出驱动电路的响应速度:(芯片内部在I/O口的输出部分安排了多个响应速度不同的输出驱动电路,用户可以根据自己的需要选择合适的驱动电路,通过选择速度来选择不同 ...

  8. 数据库存储图片相对路径使用问题,配置tomcat的server.xml文件

    我想从前端读取路径的时候,必须输入相对路径+根路径,但是我数据库中存的相对路径 接下来讲解如何通过相对路径获得照片 首先我们需要在tomcat的server.xml文件中更改属性,eslipse可以直 ...

  9. jQuery中获取属性值:attr()、html()、text()、val()等(一)

    <!DOCTYPE html> <html> <head> <title>01_basic.html</title> <meta na ...

  10. netty系列之:搭建HTTP上传文件服务器

    目录 简介 GET方法上传数据 POST方法上传数据 POST方法上传文件 总结 简介 上一篇的文章中,我们讲到了如何从HTTP服务器中下载文件,和搭建下载文件服务器应该注意的问题,使用的GET方法. ...