说到定时器，大家就肯定知道setTimeout()和setImterval(),但是他们背后还有很多更重要的知识点需要我们去掌握
首先我们重新了解一下定时器的用法
JavaScript提供了定时执行代码的功能，叫做定时器(timer)，主要由setTimeout()和setInterval()这两个函数来完成,用法如下
setTimeout()
指定某个函数或者代码段，在多少毫秒内执行，会返回一个编号，编号可以用来取消这个定时器
var timer = setTimeout(func | code ,delay)console.log(1); setTimeout('console.log(2)',1000); console.log(3); //输出 1 3 2 因为setTimeout指定第二行语句推迟1000毫秒再执行需要注意的是，推迟执行的代码必须以字符串的形式，放入setTimeout，因为引擎内部使用eval函数，将字符串转为代码。如果推迟执行的是函数，则可以直接将函数名，放入setTimeout。一方面eval函数有安全顾虑，另一方面为了便于JavaScript引擎优化代码，setTimeout方法一般总是采用函数名的形式，就像下面这样。
setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
var i = 1 var timer = setInterval(function() { console.log(i++); }, 1000);
定时器有触发就有停止
setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);
1.异步
2.节流
首先我们了解一下什么是异步
我们js的运行机制，一般情况下是从上至下的执行，这就是很舒服，让人看起来也很容易理解，就比方有是一个保姆，每次做完一件事再去做一件事，那总会有一些特殊情况发生，比如说，保姆今天需要做的事是，打扫卫生，拿快递，买菜，做饭，但是这个保姆比较笨，快递小哥打电话给他的时候对他说:"麻烦你过三十分钟的时候去楼下拿一下快递，我准时到!",这个时候保姆就慌的一笔，这尼玛那个时候我事做没做完都不知道，他自然有自己的方法，对着小哥说：“那个麻烦你等一下，我需要把事情做完再去那快递，所以我一会打电话给你你在30分钟后到我楼下把”，没办法，快递小哥只能同意了。这就是异步
就是把一件事放在最后面的做，并不和其他事搀和着同时去做，一件一件的完成，等做完了再去做刚才搁下的事（拿快递）这个就是异步处理，也是单线程模型的特点，很多语言都是这个特点,比如php。
很费解，为什么说定时器很重要呢，因为定时器和我们的js异步处理是密不可分的
setTimeout('console.log(2)',0);
console.log(1);
console.log(3);
上述的代码按照正常的逻辑是输入的应该是2,1,3
但是我们运行一下，就可以看出来，我们代码运行的是 1,3,2
why
我们js开始渲染的时候会开辟两个空间，一个是正常执行空间，放置一般的代码段，一个是任务队列，他们会把认为耗时的，应该在后面的函数或者代码段放在任务队列里面，也就是图里面的webAPIs,DOM操作，ajax，定时器。等正常执行空间执行完成之后，再去执行任务队列里里面的任务！（就好比最后拿快递一个意思）
带着这个思想，我们再去理解一下上述代码,首先计时器代码被放置在任务队列里面，等其他两个console.log()执行完成之后再去执行定时器代码
2.节流
我们定时器中的setTimeout被使用后是每隔一段时间触发一次内部函数，我们可以使用某种暴力的手法暂时暂停setTimeout的运行，就是节流，仔细阅读下段代码
var flag;
function f1(){
if (flag) {
clearTimeout(flag)
}
flag = setInterval(function(){
console.log('我每隔一秒就执行，除非你调用f1函数打断我')
},5000）
}
f1();
这段代码的意思就是首先申明一个变量flag
申明函数在f1()函数内进行判断，如果flag变量不为空就暂停计时器，为空就触发计时器控制console.log打印内容,并调用函数f1()
但是这个时候打开控制台的时候就会发现控制台每隔五秒输出一次‘我每隔五秒就执行，除非你调用f1函数打断我',但是我们在控制台输入f1()回车的时候就会发现暂时停止打印了，但是五秒过后又出现了打印内容。这个就是函数节流
函数节流我们可以理解成用一个小手法把定时器暂时停止
举例说明:
<input>
docuemnt.querySelectorAll('input').addEventListener('keyup',function(){
if(this.value === '') return
if(this.timer) clearTimeout(this.timer)
this.timer = setTimeout(()=>{
console.log(this.value)
},300)
}) //实现一个300内输入支付不实行事件节流
let oInput = document.querySelector('input')
// oInput.addEventListener('input', function(e) {
// //如果直接每次onInput发请求，会导致性能问题
// console.log(e, this)
// })
oInput.addEventListener('input', debounce(callback, 500))
function debounce(fn, delay) {
let timer = null
// 绑定上下文this
let self = this
return function() {
let arg = arguments
// 每次清楚定时器
clearTimeout(timer)
// 重新打开定时器，做到只有最后一次执行了
timer = setTimeout(() => {
// 绑定this，传入参数给callback。通常我们需要事件对象就ok
fn.apply(this, arg)
}, delay)
}
}
function callback(e) {
console.log('触发', e.target.value)
}
//世界节流 停止输出后一秒钟打印信息
