通常用的方法：
启动定时器：
window.setInterval(Method,Time)  

Method是定时调用的js方法
Time是间隔时间，单位是毫秒
取消定时器：
clearInterval(Method);


那么问题来了。用 clearInterval(timerid);来清除，往往不能马上停止，用什么方法比较好解决？
优化方案如下
var timeout = false; //启动及关闭按钮function time(){  if(timeout) return;  Method();  setTimeout(time,100); //time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒}

总结
一般不用setInterval，而用setTimeout的延时递归来代替interval。
setInterval会产生回调堆积，特别是时间很短的时候。  
            
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

在JavaScript里，我们已经会使用一些原生提供的方法来实现需要延时执行的操作代码，比如很多在线时钟的制作，图片轮播的实现，还有一些广告弹窗，但凡可以自动执行的东西，都是可以和定时器有关的。今天就来和大家分享一下，关于我们在JavaScript里经常会使用到的定时器方法
在JavaScript里，我们要学习四个定时器的使用方法，setTiemout、setInterval、setImmediate、requestAnimationFrame，一起来看看吧！
什么是定时器
JavaScript中提供了一些原生的函数方法来实现延时去执行某一段代码，这个就是定时器
下面我们来认识一下这些定时器
setTimeout:
设置一个定时器，在定时器到期后执行一次函数或代码段
 var timeoutId = window.setTimeout(func[, delay,param1,...]);
 var timeoutId = window.setTimeout(code[, delay]);
上面用到的关键词名称的意义：
timeoutId: 定时器ID
func: 延迟后执行的函数
code: 延迟后执行的代码字符串，不推荐使用原理类似eval()
delay: 延迟的时间(单位：毫秒)，默认值为0
param1: 向延迟函数传递而外的参数，IE9以上支持
setInterval:
以固定的时间间隔重复调用一个函数或者代码段
 var intervalId = window.setInterval(func, delay[, param1,...]);
 var intervalId = window.setInterval(code, delay);
intervalId: 重复操作的ID
func: 延迟调用的函数
code: 代码段
delay: 延迟时间，没有默认值
setImmediate:
在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和Node 0.10+中有实现)，类似setTimeout(func, 0)
 var immediateId = setImmediate(func[, param1, param2, ...]);
 var immediateId = setImmediate(func);
immediateId: 定时器ID
func: 回调
requestAnimationFrame:
专门为实现高性能的帧动画而设计的API，但是不能指定延迟时间，而是根据浏览器的刷新频率而定(帧)
 var requestId = window.requestAnimationFrame(func);
func: 回调
举几个栗子加深思考
基本用法
 // 下面代码执行之后会输出什么？ var intervalId, timeoutId; timeoutId = setTimeout(function() {    console.log(1); }, 300); setTimeout(function() { clearTimeout(timeoutId);     console.log(2); }, 100); setTimeout('console.log("5")', 400); intervalId = setInterval(function() {     console.log(4); clearInterval(intervalId); }, 200); // 分别输出: 2、4、5
setInterval 和 setTimeout的区别？
// 执行下面的代码块会输出什么？ setTimeout(function() {    console.log('timeout'); }, 1000); setInterval(function() {    console.log('interval') }, 1000); // 输出一次 timeout，每隔1S输出一次 interval /*--------------------------------*/ // 通过setTimeout模拟setInterval 和 setInterval有啥区别么？ varcallback = function() { if(times++ > max) { clearTimeout(timeoutId); clearInterval(intervalId); }     console.log('start', Date.now() - start); for(var i = 0; i < 990000000; i++) {}    console.log('end', Date.now() - start); }, delay = 100, times = 0, max = 5, start = Date.now(), intervalId, timeoutId; functionimitateInterval(fn, delay) {    timeoutId = setTimeout(function() { fn(); if(times <= max) { imitateInterval(fn ,delay); } }, delay); } imitateInterval(callback, delay); intervalId = setInterval(callback, delay);
如果是setTimeout和setInterval的话，它俩仅仅在执行次数上有区别，setTimeout一次、setIntervaln次。
而通过setTimeout模拟的setInterval与setInterval的区别则在于：setTimeout只有在回调完成之后才会去调用下一次定时器，而setInterval则不管回调函数的执行情况，当到达规定时间就会在事件队列中插入一个执行回调的事件，所以在选择定时器的方式时需要考虑setInterval的这种特性是否会对你的业务代码有什么影响？
setTimeout(func, 0) 和 setImmediate(func)谁更快？
 console.time('immediate'); console.time('timeout'); setImmediate(() => {     console.timeEnd('immediate'); }); setTimeout(() => {     console.timeEnd('timeout'); }, 0);
在Node.JS v6.7.0中测试发现setTimeout更早执行
几道经典的定时器面试题
下面代码运行后的结果是什么？
 // 题目一 var t = true;  setTimeout(function(){    t = false; }, 1000);  while(t){}  alert('end');
 // 题目二 for(var i = 0; i < 5; i++) { setTimeout(function() {        console.log(i); }, 0); }
  // 题目三 var obj = {    msg: 'obj', shout: function() { alert(this.msg); }, waitAndShout: function() { setTimeout(function() { this.shout(); }, 0); } }; obj.waitAndShout();
在讲解上面面试题的答案之前，我们先要理解一下定时器的工作原理，以方便理解上面的题目
JS定时器的工作原理
这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理，该图为一个简单版的原理图。
在这图中，左侧数字代表时间，单位毫秒；
左侧文字代表某一个操作完成后，浏览器去询问当前队列中存在哪些正在等待执行的操作；
蓝色方块表示正在执行的代码块；
右侧文字代表在代码运行过程中，出现哪些异步事件。
大致流程如下：
1.程序开始时，有一个JS代码块开始执行，执行时长约为18ms，在执行过程中有3个异步事件触发，其中包括一个setTimeout、鼠标点击事件、setInterval
2.第一个setTimeout先运行，延迟时间为10ms，稍后鼠标事件出现，浏览器在事件队列中插入点击的回调函数，稍后setInterval运行，10ms到达之后，setTimeout向事件队列中插入setTimeout的回调
当第一个代码块执行完成后，浏览器查看队列中有哪些事件在等待，他取出排在队列最前面的代码来执行
3.在浏览器处理鼠标点击回调时，setInterval再次检查到到达延迟时间，他将再次向事件队列中插入一个interval的回调，以后每隔指定的延迟时间之后都会向队列中插入一个回调
4.后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行
在这也只是对定时器的工作原理做了简单的叙述，其实实际的实现处理过程会更加复杂。
面试题的答案
在我们理解了定时器的运行原理之后，接下来我们就基于运行原理的基础上，来看看上面的经典面试题的答案
第一题
alert永远都不会执行，因为JS是单线程的，且定时器的回调将在等待当前正在执行的任务完成后才执行，而while(t) {}直接就进入了死循环一直占用线程，不给回调函数执行机会
第二题
代码会输出 5 5 5 5 5，理由同上，当i = 0时，生成一个定时器，将回调插入到事件队列中，等待当前队列中无任务执行时立即执行，而此时for循环正在执行，所以回调被搁置。当for循环执行完成后，队列中存在着5个回调函数，他们的都将执行console.log(i)的操作，因为当前JS代码上中并没有使用块级作用域，所以i的值在for循环结束后一直为5，所以代码将输出5个5
第三题
这个问题涉及到this的指向问题，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的this关键字会指向window (或全局)对象，window对象中并不存在shout方法，所以就会报错，修改方案如下:
 var obj = {     msg: 'obj', shout: function() { alert(this.msg); }, waitAndShout: function() { var self = this; // 这里将this赋给一个变量 setTimeout(function() {            self.shout(); }, 0); } }; obj.waitAndShout();
需要注意的点
1.setTimeout有最小时间间隔限制，HTML5标准为4ms，小于4ms按照4ms处理，但是每个浏览器实现的最小间隔都不同
2.因为JS引擎只有一个线程，所以它将会强制异步事件排队执行
3.如果setInterval的回调执行时间长于指定的延迟，setInterval将无间隔的一个接一个执行
4.this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决

JavaScript定时器
原链接https://www.runoob.com/w3cnote/js-timer.html

js定时器有一下两种方法：
setInterval(): 按指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，指导clearInterval()被调用或窗口关闭
setTimeout(): 在指定的毫秒数后调用函数或计算表达式
setInterval()
setInterval(code,millisec,lang)

code  必需。要调用的函数或要执行的代码串
millisec  必需。周期性执行或调用code之间的事件间隔，以毫秒计
lang 可选。脚本语言可以是 JScript|VBScript|JavaScript
<html>
<body>

<input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("clock").value=t;
}
</script>

<button οnclick="int=window.clearInterval(int)">停止</button>

</body>
</html>

setTimeout(）
setTimeout(code,millisec,lang)

code  必需。要调用的函数或要执行的代码串
millisec  必需。周期性执行或调用code之间的事件间隔，以毫秒计
lang 可选。脚本语言可以是 JScript|VBScrip

JavaScript 定时器

目录：
JavaScript 定时器
1、介绍
2、定时器分类
2.1创建计时器
2.1.1  setInterval 定时器
2.1.2 setTimeout 定时器
2.3  参数说明
2.4 停止定时器
2.4.1 setInterver 定时器
2.4.2 setTimeout 定时器
3、经典案例
3.1 手机号验证码发送倒计时
3.2 当前年月日以及时间
3.3 元旦倒计时

1、介绍
​		计时器有时候可以帮助我们做很多事情，比如倒计时、制作时间闹钟……等等。在JavaScrpt中，存在两种计时器，一种是一次性的，时间一到就执行；另一种是周期性的，根据设定的时间周期不断进行调用绑定的函数。
2、定时器分类
2.1创建计时器
2.1.1  setInterval 定时器
​	**说明：**按照指定的周期(以毫秒计)来调用函数或表达式。该方法会不停的调用绑定的函数，直到停止计时器或者窗口被关闭。
​	语法：
window.setInterval(code,millisec,lang);

2.1.2 setTimeout 定时器
​	**说明：**在指定的毫秒数之后调用绑定的函数或表达式，我们把这个函数也叫定时炸弹。
​	语法：
window.setTimeout(code,millisec,lang);

2.3  参数说明




参数
描述




code
必需。要调用的函数或要执行的代码串。


millisec
必需。周期性执行或调用code之间的时间间隔，以毫秒计。


lang
可选。JScript | VBScript | JavaScript


注意：

参数code为绑定函数，回调函数为callback。这个函数可以直接写在方法参数所在的位置，还可以可以采用字符串"函数名()"，以及直接写函数名的方式调用，但是不推荐使用字符串的方式。
millisec延迟的毫秒数可以省略，默认为0，如果写则必须是毫秒
如果定时器比较多的话，可以给每个定时器添加一个标识符，也就是用一个变量接收。

2.4 停止定时器
2.4.1 setInterver 定时器
window.clearInterval(定时器标识符);

2.4.2 setTimeout 定时器
window.clearTimeout(计时器标识符);

3、经典案例
3.1 手机号验证码发送倒计时
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机号验证倒计时</title>
    <style>
        div {
            width: 220px;
            height: 30px;
            line-height: 30px;
            margin: 150px auto;
        }
        
        #btn {
            width: 45px;
            height: 20px;
        }
        
        #tBox {
            width: 150px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" placeholder="+86 手机号" id="tBox">
        <input type="button" id="btn" value="获取">
    </div>
    <script>
        window.onload = function() {
            // 获取元素
            var tBox = document.querySelector("#tBox");
            var btn = document.querySelector("#btn");
            // 给按钮添加点击事件
            btn.addEventListener("click", function(e) {
                // 设置总共的秒数
                var second = 60;
                // 如果输入框中的值不为空
                if (tBox.value != "") {
                    // 添加计时器
                    var timer = window.setInterval(function() {
                        // 将秒数和单位赋值给按钮框
                        btn.value = second + "s";
                        // 修改总秒数
                        second -= 1;
                        // 当秒数为-1时
                        if (second == -1) {
                            // 修改按钮的值
                            btn.value = "获取";
                            // 并暂停计时器
                            window.clearInterval(timer);
                        }
                    }, 1000);
                }
            })
        }
    </script>
</body>

</html>

3.2 当前年月日以及时间
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS实现报时器</title>
    <style>
        .box {
            overflow: hidden;
            width: 619px;
            height: 400px;
            background-color: #49B5AA;
            margin: 80px auto;
        }
        
        .content {
            overflow: hidden;
            width: 555px;
            height: 318px;
            background-color: #ffffff;
            margin: 40px auto;
            border-radius: 20px;
        }
        
        h4 {
            width: 272px;
            height: 26px;
            margin: 0 auto;
            line-height: 26px;
            text-align: center;
            margin-top: 100px;
            font-size: 22px;
        }
        
        ul {
            width: 417px;
            height: 20px;
            margin: 20px 50px 98px 50px;
            color: #3CAFA4;
        }
        
        ul>li {
            list-style: none;
            float: left;
            font-size: 60px;
            margin: 0 10px;
        }
        
        #hour,
        #minute,
        #second {
            width: 77px;
            height: 77px;
            line-height: 77px;
        }
        
        ol {
            width: 417px;
            height: 20px;
            position: relative;
            left: 170px;
            color: #3CAFA4;
        }
        
        ol>li {
            list-style: none;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content">
            <h4>钟表计时器(原创)</h4>
            <ol>
                <li id="year"></li>
                <li>年</li>
                <li id="month"></li>
                <li>月</li>
                <li id="day"></li>
                <li>日</li>
            </ol>
            <ul>
                <li id="hour"></li>
                <li>:</li>
                <li id="minute"></li>
                <li>:</li>
                <li id="second"></li>
            </ul>
        </div>
    </div>
    <script>
        window.onload = function() {
            // 获取时间元素
            var hour = document.querySelector("ul>#hour");
            var minute = document.querySelector("ul>#minute");
            var second = document.querySelector("ul>#second");
            // 获取日期元素
            var year = document.querySelector("ol>#year");
            var month = document.querySelector("ol>#month");
            var day = document.querySelector("ol>#day");

            // 设置日期
            function setDate() {
                // 实例化日期对象
                var date = new Date();
                year.innerText = date.getFullYear();
                date.getMonth() < 10 ? month.innerText = "0" + date.getMonth() : month.innerText = date.getMonth();
                date.getDate() < 10 ? day.innerText = "0" + date.getDate() : day.innerText = date.getDate();

            }
            // 设置时间
            function setTimer() {
                // 实例化日期对象
                var date = new Date();
                date.getHours() < 10 ? hour.innerText = "0" + date.getHours() : hour.innerText = date.getHours();
                date.getMinutes() < 10 ? minute.innerText = "0" + date.getMinutes() : minute.innerText = date.getMinutes();
                date.getSeconds() < 10 ? second.innerText = "0" + date.getSeconds() : second.innerText = date.getSeconds();
            }
            // 在计时器开启之前前将其函数加载并执行
            setDate();
            setTimer();
            // 创建并开启计时器
            window.setInterval(setDate, 1000);
            window.setInterval(setTimer, 1000);


        }
    </script>
</body>

</html>

3.3 元旦倒计时
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元旦倒计时</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 250px;
            background-color: red;
            margin: 100px auto;
            overflow: hidden;
        }
        
        h4 {
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin: 50px auto;
        }
        
        .day {
            width: 50px;
            height: 30px;
            font-size: 20px;
            margin: 0 auto;
            color: gold;
        }
        
        #time {
            width: 110px;
            height: 30px;
            margin: 10px auto;
        }
        
        ul>li {
            width: 30px;
            height: 30px;
            list-style: none;
            float: left;
            margin-left: 0px;
            text-align: center;
            line-height: 30px;
            color: gold;
        }
        
        .fig {
            width: 10px;
            margin-left: 0px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h4>距离元旦还有</h4>
        <p class="day"></p>
        <ul id="time">
            <li class="hour"></li>
            <li class="fig">:</li>
            <li class="minute"></li>
            <li class="fig">:</li>
            <li class="second"></li>
        </ul>
    </div>
    <script>
        window.onload = function() {
            // 获取元素
            var day = document.querySelector(".day");
            var hour = document.querySelector(".hour");
            var minute = document.querySelector(".minute");
            var second = document.querySelector(".second");
            // 设置时间
            function setTimer() {
                // 先通过时间对象获取元旦的毫秒数
                var newYear = +new Date("2021-1-1 00:00:00");
                // 再获取当前的时间对象的毫秒数
                var nowtime = +new Date();
                // 当前时间距离元旦的秒数
                var distance = (newYear - nowtime) / 1000;
                // 通过距离的秒数获取天数
                var dayTime = parseInt(distance / 60 / 60 / 24);
                dayTime < 10 ? day.innerText = "0" + dayTime + "天" : day.innerText = dayTime + "天";
                // 获取距离的秒数的小时数
                var hourTime = parseInt(distance / 60 / 60 % 24);
                hourTime < 10 ? hour.innerText = "0" + hourTime : hour.innerText = hourTime;
                // 获取距离的秒数的分钟数
                var minuteTime = parseInt(distance / 60 % 60);
                minuteTime < 10 ? minute.innerText = "0" + minuteTime : minute.innerText = minuteTime;
                // 获取距离的秒数的秒数
                var secondTime = parseInt(distance % 60);
                secondTime < 10 ? second.innerText = "0" + secondTime : second.innerText = secondTime;
            }
            setTimer();
            window.setInterval(setTimer, 1000);
        }
    </script>
</body>

</html>