一、节流

• 概念：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。

• 类似于技能CD。

• 应用：点击按钮，轮播图点击左右箭头。

• 插件lodash.js，它里面封装了函数的防抖与节流业务。

  <p>计数器：<span>0</span></p> <button>+1</button> // 获取元素 let span = document.querySelector('span') let btn = document.querySelector('button') let count = 0 let timer = null // 控制节流阀是否开启或关闭 let flag = true // 需求：在一秒以内，不管点击按钮多少次，计数器数值只能+1 btn.onclick = function () {   if (flag) {     flag = false     timer = setTimeout(() => {       count++     	span.innerHTML = count         flag = true     }, 1000)   } } 

二、防抖

• 概念：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次。

• 类似于LOL回城被打断。

• 应用：输入框搜索。

• 插件lodash.js，它里面封装了函数的防抖与节流业务。

  <input type="text" @input="inputFn" /> data () {   return {     timer: null   } }, methods: {   inputFn () {     if (this.timer) { 	clearTimeout(this.timer)     }     this.timer = setTimeout(() => { 	// 发送网络请求     }, 3000)   } }