浅谈js中的防抖(debounce)与节流(throttle)

在实际应用场景中，我们经常遇见高频调用函数，导致浏览器的消耗，但我们可以根据实际需求使用防抖和节流函数。

1.防抖

释义：在限定时间内，只执行一次函数。如果事件再次触发，则重新计时，计时完毕再执行函数。

 //非立即执行版
function debounce(func, wait) {
    let timeout;
    return function (event) {
        // console.log(event)
        let _this = this
        let _args = arguments
        if (timeout) {
            clearTimeout(timeout)
        }
        timeout = setTimeout(() => {
            func.apply(_this, _args)
        }, wait)
    }
}
 //立即执行版，即首先加载一次
 function debounce2(func, wait) {
     let timeout;
     return function (event) {
         // console.log(event)
         let _this = this
         let _args = arguments
         if (timeout) {
             clearTimeout(timeout)
         }
         console.log(timeout)
         let now = !timeout
         timeout = setTimeout(() => {
             timeout = null
         }, wait)
         if (now) func.apply(_this, _args)
     }
 }

2.节流

释义：如果持续触发事件，在一定时间只执行一次函数。

 function throttle(func, wait) {
     let isReady = true
     return function () {
         let _this = this
         let _args = arguments
         if (!isReady) {
             return
         }
         isReady = false
         timeout = setTimeout(() => {
             isReady = true
             func.apply(_this, _args)
         }, wait)
     }
 }