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

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

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