現在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);
};
這樣就實現了想要的效果