定时器的工作原理，这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理，该图为一个简单版的原理图。·

上图中，左侧数字代表时间，单位毫秒；左侧文字代表某一个操作完成后，浏览器去询问当前队列中存在哪些正在等待执行的操作；蓝色方块表示正在执行的代码块；右侧文字代表在代码运行过程中，出现哪些异步事件。该图大致流程如下：

  • 程序开始时，有一个JS代码块开始执行，执行时长约为18ms，在执行过程中有3个异步事件触发，其中包括一个setTimeout、鼠标点击事件、setInterval
  • 第一个setTimeout先运行，延迟时间为10ms，稍后鼠标事件出现，浏览器在事件队列中插入点击的回调函数，稍后setInterval运行，10ms到达之后，setTimeout向事件队列中插入setTimeout的回调
  • 当第一个代码块执行完成后，浏览器查看队列中有哪些事件在等待，他取出排在队列最前面的代码来执行
  • 在浏览器处理鼠标点击回调时，setInterval再次检查到到达延迟时间，他将再次向事件队列中插入一个interval的回调，以后每隔指定的延迟时间之后都会向队列中插入一个回调
  • 后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行

这里只是对定时器的原理做一个简单版的描述，实际的处理过程比这个复杂。

下面我们利用定时器实现一个简单的随机点名功能，代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <style>

        div{width: 300px;height: 100px;margin: 20px auto;font-size: 50px;text-align: center;line-height: 100px;}

        #btn{width: 200px;height: 40px;margin: 10px auto;background: red;color: #FFFFFF;font-size: 20px;text-align: center;cursor: pointer;display: block;}

    </style>

</head>

<body>

    <div id="content">请点击按钮</div>

    <input type="button" id="btn" value="开始">

    <script>

        var ocontent = document.getElementById("content");

        var obtn = document.getElementById("btn");

        var onoff = 1;        //打开

        var timer = null;        //设置全局变量

        var str = ["亚瑟","鬼谷子","铠","橘右京","项羽","梦奇","白起","赵云","李白","韩信","刘备","鲁班七号","墨子","孙膑","周瑜","庄周","廉颇","程咬金","典韦","后羿","扁鹊","李元芳","张飞","刘禅","兰陵王","达摩","曹操","钟馗","高渐离","宫本武藏","吕布","嬴政","姜子牙","老夫子","狄仁杰","夏侯惇","关羽","哪吒","太乙真人","干将莫邪","成吉思汗","牛魔","百里守约","百里玄策","苏烈","黄忠","诸葛亮","东皇太一","杨戬","后羿","孙悟空","张良","韩信","刘邦","达摩","马可波罗","娜可露露","露娜","妲己","甄姬","虞姬","大乔","小乔","王昭君","貂蝉","芈月","阿珂","花木兰","武则天","不知火舞","孙尚香","蔡文姬","安琪拉","钟无艳","女蜗","雅典娜","艾琳"]

        obtn.onclick = function(){

            if(onoff == 1){        //开始随机点名

                clearInterval(timer);//避免重复点击按钮出现bug

                timer = setInterval(function(){

                    var randomNum = Math.round(Math.random()*(str.length-1))

                    ocontent.innerHTML = str[randomNum];

                },10)

                onoff = 0;    //"定位"到暂停功能

                obtn.value = "就是你了"

            }else if(onoff == 0){

                clearInterval(timer);

                onoff = 1;    //暂停后需恢复到重新开始的功能

                obtn.value = "继续"

            }

        }

    </script>

</body>

</html>

效果截图如下：

这个随机点名功能实现起来相对容易，利用了定时器，设置了一个开关来控制开始和暂停。

另外我在另一篇随笔中用定时器写了一个倒计时功能，实现原理和这个类似，关键的两个点是定时器和开关，（相比较而言，开关更难理解）附上地址：https://www.cnblogs.com/qiaowanze/p/11399260.html

原生JS实现简易随机点名功能的更多相关文章

  1. 原生JS实现简易评论更新功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  3. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  4. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  5. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  6. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  7. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  8. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. js javascript 简易随机值穿插加解密【原】

    适用场景 本方法适用于需要对敏感信息进行加密传输,但加解密要求又不高的场景,因为是前台的javascript加解密,所以其实还是能通过js代码分析出原始值来的. 如果您对信息极其敏感, 比例登录密码这 ...

随机推荐

  1. MySQL 索引最佳实践

    原文请关注 这里 这是 文章 的翻译,在翻译过程中,会对其中涉及到的语句加上一些个人理解以及 SQL 语句的执行,并进行特别的标注. 1. 你做了一个很棒的选择,因为: 对于普通开发者和 DBA,理解 ...

  2. Mybatis笔记2

    使用Mybatis完成的CRUD操作 个人总结的一些小规律 学习过程中碰到的错误: org.apache.ibatis.exceptions.PersistenceException: ### Err ...

  3. Python26之字典2（内置函数）

    一.工厂函数的概念 和序列类型的工厂函数一样,dict()也是一个工厂函数,本质上是一个类,Python程序无处不对象的概念可见一斑 二.字典类型内置函数的用法 1.fromkeys(iterable ...

  4. python — 线程

    目录 1.线程基础知识 2 Thread 类 3 锁 4 队列 1.线程基础知识 1.1 进程与线程的区别 进程: 创建进程 时间开销大 销毁进程 时间开销大 进程之间切换 时间开销大 线程: 线程是 ...

  5. hadoop 空间配置

    hadoop-------------- 分布式计算框架. common // hdfs //存储 mapreduce //MR,编程模型. yarn //资源调度. 集群部署----------- ...

  6. 2019 牛客多校五 F. maximum clique 1 (最大团)

    大意: 给定$n$个互不相同的数, 若两个数异或后二进制中$1$的个数不少于$2$则连边, 求最大团. 最大团转为补图最大独立集. 可以发现补图是二分图, 所以直接$dinic$即可. 最大独立集相当 ...

  7. jmeter接口测试中的用例数据分离

    用jmeter做接口测试的话,一个jmx文件就可以是一个用例,而用例的设计多数还是等价类.边界值等方法.用例越来越多的时候,维护比较麻烦,所以可以把用例的数据存在csv文件中,然后通过组件(CSV D ...

  8. OSS服务和自建服务器存储对比

    1 OSS 1.1 什么是OSS   阿里云对象存储服务(Object Storage Service,简称OSS),是阿里云提供的海量.安全.低成本.高可靠的云存储服务.它是一个分布式的对象存储服务 ...

  9. Unity_如何判断应用设备内存小于1G（内容可定制为根据机器配置进行不同LOD）

    直接上脚本,需要用的时候在需要的地方调用就好. 如: //获取设别的最大内存,作为判断LOD等级和决定1G以下设备不能进游戏 #if UNITY_ANDROID && !UNITY_E ...

  10. DevExtreme学习笔记(一) DataGrid中js分析

    1.overviewjs采用 $(function() { $("#gridContainer").dxDataGrid({ dataSource: { store: { type ...