js节流防抖

在前端开发中，有一部分用户行为会频繁的触发事件，而对于DOM操作，资源加载等耗费性能的处理，很可能会导致卡顿，甚至浏览器的崩溃。防抖和节流就是为了解决这一类的问题。

节流（throttle）

应用场景：鼠标滚动 按钮的点击

A、很多抢票、抢购这类操作很多都加了节流，为了避免用户大量点击造成服务器压力，当固定时间内，不论点击多少次，只执行一次抢的动作。

B、很多界面操作，会需要更新当前界面的数据，如果这类操作非常的高频，数据就可以采用节流的形式。

// 函数节流
  <button id="throttle">
        我要花钱
    </button>
    <script>
        let sign = true
        document.getElementById('throttle').onclick = function () {  
            if (!sign) {
                return;
            }
            sign=false
            setTimeout(()=>{
                sign=true
                console.log('优秀')
            },2000)
        }

    </script>

防抖（debounce）

应用场景：键盘的按起

A：百度搜索。一般搜索绑定输入事件（每次触发输入事件都会触发），如果触发一下就搜索一次，就会给服务器造成巨大压力。所以百度搜索利用防抖：当用户一直在输入的时候，比如说规定时间0.2秒，0.2秒内触发输入事件触发五次，那么这期间都不会触发远程搜索，当某一次输入后停顿满0.2秒才会去触发远程搜索。

B、地图加载：地图的加载是很缓慢的，一般只加载一定范围内的，然后等用户拖动地图到一个之前没加载的地方时，这个时候地图就该加载新的一部分。

<button id="debounce">

        我要发财
    </button>
    <script>
    // 函数防抖
let timer = false;
document.getElementById("debounce").onclick = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
    timer = setTimeout(function(){
        console.log('发财了');
    }, 3000);
}; 
    </script>

节流和防抖都是为了优化高频触发的现象，具体使用按实际情况来看。个人感觉节流更多可能是为了让用户体验好一些，毕竟一直操作有些情况下是存在的，但是一直没有变化在很奇怪，防抖的话可能对于性能上更友善，具体还是看业务需求。