防抖與節流原理與區別

一：函數的節流： 一定時間內只觸發一次 

可以是直接給一個定時器，按時觸發，

// 函數節流 var canRun = true; document.getElementById("throttle").

onscroll = function(){

if(!canRun){ // 判斷是否已空閑，如果在執行中，則直接return return;

}

canRun = false;

setTimeout(function(){

console.log("函數節流"); canRun = true; 
}, 300); };

也可以根據一個條件判斷觸發

節流demon   http://demo.deanhan.cn/suggestion.html

　　二：函數防抖 在規定的時間內只觸發一次，如果多次觸發，清除上次觸發的事件，重新計算時間， 

// 防抖就是事件 ：多次觸發事件后，

//事件處理函數只執行一次，

//並且是在觸發操作結束時執行

//事件多次觸發清除之前的定時器

let timer;

window.onscroll = function() {

console.log(12)

if (timer) {

clearTimeout(timer)

}

timer = setTimeout(function() {

//滾動條位置

let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

console.log('滾動條位置：' + scrollTop);

timer = undefined;

}, 200)

}