防抖函数和预编译

防抖函数

　　是当持续触发事件，一定时间内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前 又一次出发了事件 就重新开始延时

触发事件 一段时间内 没有触发 事件执行 肯定是定时器（那么意味着上一次还没有结束的定时器要清除掉重新开始）

例如:

　　假如防抖设置为3秒

　　第一次执行事件后，开始倒计时3秒

　　然后等到还剩余1秒时，再次触发了事件

　　重新倒计时，从三秒开始

　　这样第一次到第二次触发事件就经历了5秒，极大的减轻了服务器的压力

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

适用场景：

按钮提交场景：防止多次提交按钮，只执行最后提交的一次 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似

 

防抖函数常见应用

1. scroll事件的滚动触发
2. 搜索框输入查询
3. 表单验证
4. 按钮提交事件
5. 浏览器`窗口缩放,resize事件

预编译

　　作用域的创建阶段，预编译的阶段　　预编译的时候做了哪些事情 　　JS的变量对象 AO对象　　供JS引擎自己去访问的

1.创建了ao对象　　2.找形参和变量的声明作为ao对象的属性名 值是undefined　　3.实参和形参相统一　　4.找函数声明，会覆盖变量的声明

function fn(a,c){
    console.log(a) 
        {
            {
                function a()
               }
        }
    var a = 123
        console.log(a)     //123
        console.log(c)     //function c(){}
    function a() {}
        if(false) {
            var d = 678 
        }
         console.log(d)    //undefined
         console.log(b)    //undefined
    var b = function() {}
        console.log(b)    //function() {}
    function c(){}
    console.log(c) }
fn(1,2)                            

AO:{

　　a:undefined 1 function a() {}

　　c:undefined 2 function c() {}

　　d:undefined

　　b:undefined

　　}