JS函數節流的如何使用

這篇文章給大家分享的是有關JS函數節流的如何使用的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

現在javascript的用途 真的很廣，感覺什么事都可以做，比如做視頻監控，時刻看看你喜歡的人再做什么，哎呀媽呀，這可是犯法的,不行不行。

最近工作上遇到個需求，：一個原本是pc端框架配置的需求，現在領導突然急著要，讓我從pc端兼容移動的大小，瞬間腦殼疼，由于用的都是px單位,不好真疼，然后就想到根據瀏覽器窗口改變的時候需要改一些頁面元素大小
原大小

配置成移動的的時候

function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}

然后我試著拖拽窗口,看了下控制臺居然打印了50幾次,這并不是我想要的,作為一個合理的代碼,是只需要執行一次的,可能函數里面的代碼很復雜，但卻是我想要的。
網上搜了下JavaScript高級程序設 中有專門應對此問題的函數節流

原理很簡單，利用定時器，讓函數執行延遲500毫秒，在500毫秒內如果有函數又被調用則刪除上一次調用，這次調用500毫秒后執行，如此往復

let n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}

function fn(cb,context){
clearTimeout(cb.Tid);
cb.Tid=setTimeout(function(){
    cb.call(context);
},500);
}

window.onresize=function(){
fn(resizehandler,window);
};

這樣就實現了想要的效果

感謝各位的閱讀！關于JS函數節流的如何使用就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！