极度重要之定时器

说到定时器，大家就肯定知道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

---

1.jpg

我们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)
            }
//世界节流  停止输出后一秒钟打印信息