首頁 > web前端 > js教程 > JS函數節流的用法介紹(程式碼範例)

JS函數節流的用法介紹(程式碼範例)

不言
發布: 2019-02-20 13:51:24
轉載
3034 人瀏覽過

這篇文章帶給大家的內容是關於JS函數節流的用法介紹(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

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

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

JS函數節流的用法介紹(程式碼範例)

配置成移動的的時候

JS函數節流的用法介紹(程式碼範例)

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函數節流的用法介紹(程式碼範例)

以上是JS函數節流的用法介紹(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板