防抖和节流

防抖

• 解决响应跟不上触发
• 当事件被触发后，延迟N秒再执行，如果在这N秒内再次被触发就重新计时
• 在规定时间内只可执行一次

在这里插入代码片

节流

• 解决响应跟不上触发
• 当事件被触发后，延迟N秒再执行，如果在这N秒内再次被触发不执行
• 在规定时间内只可执行一次

<script>
        // 1. 获取到图片
        var angel = $('#angel');
        // 步骤1. 定义节流阀
        var timer = null
        // 2. 绑定 mousemove 事件
        $(document).on('mousemove', (e) => {
            // 步骤3：判断节流阀是否为空 如果不为空直接return出去
            if (timer)  return ;
            // 3. 设置图片的位置
            // 步骤2：开启延时器
            timer = setTimeout(() => {
                $(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px');
                console.log(e.pageX);
                
                timer = null;//清空节流阀，方便下次开启
            }, 50)
        })
    </script>