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

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

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