什麼是Javascript函數節流?

如今javascript的用途 真的很廣,感受什麼事均可以作,好比作視頻監控,時刻看看你喜歡的人再作什麼,哎呀媽呀,這但是犯法的,不行不行。javascript

最近工做上遇到個需求,:一個本來是pc端框架配置的需求,如今領導忽然急着要,讓我從pc端兼容移動的大小,瞬間腦袋疼,因爲用的都是px單位,很差真疼,而後就想到根據瀏覽器窗口改變的時候須要改一些頁面元素大小
原大小

clipboard.png

配置成移動的的時候

clipboard.png

function resizehandler(){java

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){spa

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

}code

window.onresize=function(){視頻

fn(resizehandler,window);

};blog

這樣就實現了想要的效果ip

clipboard.png

相關文章
相關標籤/搜索