基於防抖和節流的性能優化

當下網頁中的交互愈來愈多，不少高頻事件帶來的性能問題，已是繞不過去的一個坎，怎麼去優化這些高頻事件呢？防抖和節流就必不可少。

防抖（debounce）

所謂防抖，就是指觸發事件後在 n 秒內函數只能執行一次，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。
下面是給定一個元素一個mousemove事件加一個防抖
解法一：不須要當即執行函數

function debounce (fc, wait) {
            let timmer;
            return function () {
                var args = arguments
                timmer && clearTimeout(timer)
                timmer = setTimeout(() => {
                    fn.apply(this, args)
                }, wait)
            }
        }
        function mouse () {
            console.log(1)
        }
        var a = debounce(mouse, 100)
        document.getElementById('ul').onmousemove = a

解法二：須要當即執行一次函數

function debounce (fc, wait) {
            let timmer;
            return function () {
                var now = !timmer
                var args = arguments
                timmer && clearTimeout(timer)
                timmer = setTimeout(() => {
                    timer = null
                }, wait)
                if (now) {
                    fn.apply(this, args)
                }
            }
        }

節流

節流：連續觸發的事件在某一時間段內只發生一次
解法一：不用時間戳

function jl (fn, wait) {
            let timmer = null
            return function () {
                var args = arguments
                if (!timer) {
                    timmer = setTimeout(()=>{
                        timmer = null
                        fn.apply(this,args)
                    }, wait)
                }
            }
        }

解法二：用時間戳

function jl (fn, wait) {
            let last = 0
            return function () {
                var agrs = arguments
                var now = Date.now()
                if (now - last > wait) {
                    fn.apply(this, args)
                }
            }
        }