防抖和节流

一、防抖（debounce）是什么？

1. 监听一个输入框，文字变化后出发change事件。
2. 直接用keyup，则会频繁触发change事件。
3. 防抖：用户输入结束或者暂停时，才会出发change事件。

const input1 = document.getElementById('input1');
let time = null;

input1.addEventListener('keydown', function () {
    if (time) {
        clearTimeout(timer);
    }
    timer = setTimeout(() => {
        console.log(input1.value)

        timer = null;
    }, 500)
})

二、节流 throttle

1. 拖拽一个元素时，要拿到该元素被拖拽的位置。
2. 直接用drag事件，则会频发频触，很容易导致卡顿。
3. 无论拖拽速度多快，都会每隔100ms触发一次。

const div1 = document.getElementById('div1');

let tiemr = null;

div.addEventListener('drag', function (e) {
    if (tiemr) {
        return
    }
    timer = setTimeout(() => {
        console.log(e.offsetX, e.offsetY)
        tiemr = null
    }, 500)
})