防抖&节流

防抖：

防抖就是单位时间内，频繁触发某个事件，只执行最后一次。

一般用于搜索框的关键词

实现方法：

利用lodash.js第三方库中的方法

_.debounce(函数对象, 延时毫秒值)：将原函数进行防抖处理后返回

let newFn = _.debounce(oldFn, 114514)

手写防抖：原理就是利用一个定时器，但是在定时器前面清除定时器，这样就可以做到把前面触发的定时器清除，执行最后一个创建的定时器

// 需求：鼠标在box中移动，移动停止后i++并显示数字在box页面上
 
let i = 0
 
function fn() {
   i++
   this.innerHTML = i
}
 
function debounce(fn, time) {
   let timerId
   return function() {
       clearTimeout(timerId)
       timerId = setTimeout(() => {
           fn.call(this)
       }, time)
   }
}
 
document.querySelector('.box').addEventListener('mousemove', debounce(fn, 300))

节流：

节流：就是单位时间内，频繁触发某个事件。只执行一次。

一般用于页面滚动监听事件、防止用户频繁点击

实现方法：
利用lodash.js第三方库中的方法

_.throttle(函数对象, 延时毫秒值)：将原函数进行防抖处理后返回

let newFn = _.throttle(oldFn, 114514)

手写节流：原理就是利用一个定时器，再创建一个变量作为锁，每次创建定时器都需要判断锁为true，当创建完后就把锁改成false，定时器执行完后才会把锁改成true

// 需求：鼠标在box中移动，单位时间内移动只会执行一次i++，并显示数字在box页面上
 
let i = 0
 
function fn() {
   i++
   this.innerHTML = i
}
 
function throttle(fn, time) {
   let timerId = 0
   return function() {
       if (!timerId) {
           timerId = setTimeout(() => {
               fn.call(this)
               timerId = 0
           }, time)
       }
   }
}
 
document.querySelector('.box').addEventListener('mousemove', throttle(fn, 1000))