函数防抖和函数节流

函数防抖（debounce）

当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间

函数节流（throttle）

预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新
周期

函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

           1：搜索框搜索输入。只需用户最后一次输入完，再发送请求
           2：手机号、邮箱验证输入检测
           3：窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景

  间隔一段时间执行一次回调的场景有：
           1： 滚动加载，加载更多或滚到底部监听
           2：谷歌搜索框，搜索联想功能
           3：高频点击提交，表单重复提交

相同点：

          都可以通过使用 setTimeout 实现。
          目的都是，降低回调执行频率。节省计算资源。

不同点：

函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
函数防抖关注一定时间连续触发，只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

2: 什么是事件委托？为什么要用事件委托？

什么是事件委托

事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。

为什么要用事件委托

因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大，100个li就要占用100个内存空间。如果要用事件委托，就会将所有的操作放到js程序里面，只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){})

window.onload 是在 dom 文档树加载完和所有文件加载完之后执行一个函数 document.ready 原生中

没有这个方法，jquery 中有 $().ready(function),在 dom 文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。$ (document).ready 要比 window.onload 先执行
window.onload 只能出来一次，$(document).ready 可以出现多次

面试题