js防抖和节流

1、防抖

防抖:单位时间内，频繁触发事件，只执行最后一次
举个栗子:王者荣耀回城，只要被打断就需要重新来

使用场景:
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测

<div>
    <p></p>
</div>
<div>
    <p class="p2"></p>
</div>
<script src="js/lodash.min.js"></script>
<script>
    // 利用lodash 实现防抖 500毫米后+1
    const div = document.querySelector('div');
    const p = document.querySelector('p');
    let i = 0;
    function mouseMove() {
        i++;
        p.innerHTML = i;
    }
    div.addEventListener('mousemove', _.debounce(mouseMove, 500))
</script>

手写防抖
防抖的核心就是利用定时器(setTimeout)来实现
0:声明一个定时器变量
2: 当鼠标每次滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器
3:如果没有定时器则开启定时器，记得存到变量里面
4:在定时器里面调用要执行的函数

const div1 = document.querySelector('div:nth-child(2)');
const p1 = document.querySelector('.p2');
let i1 = 0;
function mouseMove1() {
    i1++;
    p1.innerHTML = i1;
}

function debounce(fn, t) {
    let timer;
    // return一个匿名函数
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn();
        }, t)
    }
}
div1.addEventListener('mousemove', debounce(mouseMove1, 500))

2、节流

节流:单位时间内，频繁触发事件，只执行一次
举个栗子:
王者荣耀技能冷却，期间无法续释放技能
和平精英98k 换子弹期间不能射击

<div>
<p></p>
</div>
<div>
<p class="p2"></p>
</div>
<script src="js/lodash.min.js"></script>
<script>
// 利用lodash 实现防抖 500毫米后+1
const div = document.querySelector('div');
const p = document.querySelector('p');
let i = 0;
function mouseMove() {
    i++;
    p.innerHTML = i;
}
div.addEventListener('click', _.throttle(mouseMove, 1000))


const div1 = document.querySelector('div:nth-child(2)');
const p1 = document.querySelector('.p2');
let i1 = 0;
div1.addEventListener('click', function () {
    i1++;
    p1.innerHTML = i1;
})

节流是，你一直触发你的，但是我不管，我自己隔一段时间就执行一次
防抖是你一直触发，我等你不触发了，过段时间再执行。