js之防抖和节流

1.防抖

         防抖：多从操作同一个事件，以末次为准（只执行最后一次操作）。

         原理：延迟执行下一次事件触发 “在某个时间段内执行一次事件”。

         作用：降低代码执行频率。

var timer;
    btn.onclick = function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            console.log("hello");
        },1000)
    }

2.节流

      节流：在固定的时间内，多次操作一个事件，以首次为准（只执行一次操作），固定的时间内不能触发第二次事件。

      原理：延迟执行下一次事件触发 “在某个时间段内执行一次事件”。

      作用：降低代码执行频率。

    按钮


var btn = document.querySelector('#btn');
 var flag = true; // 节流阀
    btn.onclick = function(){
        if(flag == true){
            flag = false; //关闭阀门
            console.log("hello");

            setTimeout(function(){
                flag = true; //打开阀门

            },1000); //1秒之后打开节流阀“一秒之后可以触发第二次事件”。
        }
    }