防抖与节流

防抖:指的是频繁触发某个操作时,只执行最后一次
应用场景:淘宝搜索框只在输入完后,才执行查询的请求\

   // 实现的原理: 利用延时器，后一次点击，把前一次点击的延时器取消;
        //   延时器，一定要定义为全局变量，方便后面点击取消前面的延时器;
        let timer; 
        document.querySelector("button").onclick = function () {
            // 取消上一次的延时器
            clearTimeout(timer);
            // 此处的timer之前，不能加let，使用的是全局的;
            timer = setTimeout(function () {
                console.log('发送ajax...');
            }, 1000)
        }

节流:指的是单位时间内,频繁触发同一个操作,只会触发1次
应用场景:游戏里的技能,单位时间内只能发一个技能
防抖和节流的好处:减少ajax的请求,还可以节省网络资源,减少服务器的压力

 // 定义一个全局变量，类似一个控制器
        let flag = true;
        document.querySelector('button').onclick = function () {
            // 优化: flag如果等于false，那么说明之前已经有人点击了，等待执行完毕改为true，再次触发;
            // if (!flag) return;
            if (flag) {
                // 进入以后，直接修改为false
                flag = false;
                // 利用延时器实现
                setTimeout(function () {
                    console.log('发送ajax...');
                    // 执行完毕之后，修改为true
                    flag = true;
                }, 1000);
            }
        }