防抖和节流核心

防抖 是让函数在最后一次执行

节流 是固定频率 每隔一段时间执行一次

举个小例子:

(防抖)需求:校验用户输入的文本是否都是数字 合法 就在控制台输出是否合法即可

        let inp = document.querySelector('#inp');
        let flag = true;
        let timer = null;
        inp.oninput = function () {
            //只要input框的内容发生改变,就会触发这个函数
            clearTimeout(timer);// 内容每改变一次 都会把上一次形成的定时器给清除；
            timer = setTimeout(() => {
                console.log(this.value);
            }, 1000);
        }

节流:

        let flag = true;
        inp.oninput = function () {
            //当这个函数第一次执行的时候,flag是true,所以能走到判断下边的代码
            //当这个函数在500毫秒之内再次执行的时候,有用flag还是false呢:所以走不到判断下边的代码
            //当过了500毫秒之后,flag重新变成了true,这时这个函数在执行的时候就可以走到判断下边的代码
            //下边的代码又把flag变成了false,也就是说下一次能执行判断下边的代码还得等500毫秒
            if (flag === false) return;
            flag = false;
            console.log(this.value);
            setTimeout(() => {
                flag = true;
            }, 500)
        }