防抖和节流

高频事件

• window对象的resize、scroll和拖拽时的mousemove事件
• 射击游戏中的mousedow、keydown事件
• 类似百度搜索提示的keyup事件

  防抖

  在事件多次触发时，通过防抖，只执行最后一次处理程序； ```javascript var delay = 300; var common = document.getElementById(‘common’) // 获取页面的左边 var special = document.getElementById(‘special’) // 获取页面的右边

var timeid;

function debounce(fn, delay) { // 定义一个debounce函数 clearTimeout(timeid) timeid = setTimeout(function () { fn() }, delay) }

function addlist() { // 监听事件的响应事件，执行dom操作。 special.innerHTML += ‘

function commonWay() { // 这是执行了普通的函数 common.innerHTML += ‘

<a name="xLw6N"></a>
## 节流
降低事件处理程序执行的频率。比如：onmousemove事件如果每秒执行200次，通过节流使他只执行20次。
```javascript
 var delay = 300;
var common = document.getElementById('common')   // 获取页面的左边
var special = document.getElementById('special')   // 获取页面的右边
function addlist() {                // 监听事件的响应事件，执行dom操作。
  special.innerHTML += '<li>k</li>'
}
function commonWay() {     // 这是执行了普通的函数
  common.innerHTML += '<li>k</li>'
}
// tottle的实现，也就是节流的实现,就是设置了一个一开始函数运行的时间戳进行执行
var startTime, timestamp, timer;
function throttle(fn, delay) {
  timestamp = +new Date()
  clearTimeout(timer)
  if (!startTime) {
    startTime = timestamp
  }
  if (timestamp - startTime >= delay) {
    fn()
    startTime = timestamp
  } else {
    timer = setTimeout(function () {
      fn()
    }, delay)
  }
}
function debounce(fn, delay) {     // 定义一个debounce函数
  clearTimeout(fn.timeid)
  fn.timeid = setTimeout(function () {
    fn()
  }, delay)
}
window.addEventListener('resize', function () {
  throttle(commonWay, 100);
  debounce(addlist, delay);
})