性能优化——防抖和节流功能的实现

        前言

        为了处理高频率的触发事件触发而衍生出来的性能优化策略，特别是当涉及到scroll事件mousemove，keyup获取表单内容和ajax请求时候采用的提高性能的策略

        防抖策略

        实现原理：

        1 在全局作用域中声明一个 timer = null（pl 这是必须的 不设置会导致第一次事件执行时发生错误）

        2 在需要使用防抖策略的绑定事件中  先加上 clearTimeout（timer）清除定时器 

        3 设置定时器 timer = setTimeout(function() {},date);设置自己想要的时间将核心代码放入定时器内 注意一般会产生一个闭包 。

        功能解释

        当触发该事件的间隔< date时间 则会重置该事件，在高频率的事件触发发生后，只会执行最后一次的事件触发，有效的减轻了CPU的负担

        代码

let timer = null; 
$('#searchipt').on('keyup', function() {
                clearTimeout(timer);
                
                timer = setTimeout(function() {
                    核心代码;
                }, 500);
            });

         节流策略

        实现原理：
        1 设置一个节流阀 （就是一个变量），timer = null;

        2 在需要节流的事件内进行一次判定  if (time) return;——如果timer不为空，即timer被占有直接退出事件不执行下面的代码

        3 另 timer = setTimeout (function(){ 核心代码;timer = null },date);在date时间内timer已经被占用 再次触发该事件是无效的

        功能解释

        当触发事件的间隔<date时间 则不会再次执行事件，在规定的事件内节流事件只能执行一次

        代码

 let timer = null
            $(document).on("mousemove", function(e) {
               
                // 如果节流阀不为空则退出此次的事件
                if (timer) return;
                // 使得timer 不为空
                timer = setTimeout(function() {
                   核心代码;
                    timer = null;
                }, 16);