节流与防抖

简介

浏览器中某些计算和处理要比其他的昂贵的很多，例如，DOM操作比起非DOM操作交互需要更多的内存和CPU时间，连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃，为了解决这个问题，我们一般都采用节流或者防抖来解决。

节流(throttle)

不管你操作有多迅速，只按指定时间执行一次，应用场景有拖拽获取X,Y值等。

       /*
        *@param fn 处理程序
        *@param delay 指定时间
        *@return {Function}
        **/
        function throttle(fn, delay = 500) {
            let timeout = null
            return function () {
                if (!timeout) {
					timeout = setTimeout(() => {
						fn.apply(this, arguments)
						timeout = null
					}, delay)
				}
            }
        }

但是以上的节流不适合所有的场景的，因为他并不会执行最后一次操作，如果你还想执行最后一次，那么请按以下方法：

       /*
        *@param fn 处理程序
        *@param delay 指定时间
        *@param atleast 至少执行时间
        *@return {Function}
        **/
        function throttle(fn, delay=500, atleast=1000) {
            let timeout = null
            let startTime = new Date()
            return function() {
                const curTime = new Date()
                clearTimeout(timeout)
                if (curTime - startTime >= atleast) {
                    fn.apply(this, arguments)
                    startTime = curTime
                } else {
                    timeout = setTimeout(()=>{
						fn.apply(this, arguments)
					}, delay)
                }
            }
        }

防抖(debounce)

不管你操作有多迅速，在指定时间内，只执行最后一次，应用场景根据input输入内容查询搜索结果等。

       /*
        *@param fn 处理程序
        *@param delay 指定时间
        *@return {Function}
        **/
        function debounce (fn, delay = 500) {
            let timeout= null
            return function () {
                timeout && clearTimeout(timeout)
                timeout = setTimeout(() => {
                    fn.apply(this, arguments)
                    timeout = null
                },delay)
            }
        }