基于防抖和节流的性能优化

当下网页中的交互越来越多，很多高频事件带来的性能问题，曾经是绕不过来的一个坎，怎么去优化这些高频事件呢？防抖和节流就必不可少。

防抖（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)
                }
            }
        }