摘要:網(wǎng)上搜了下高級(jí)程序設(shè)中有專門應(yīng)對(duì)此問題的函數(shù)節(jié)流原理很簡(jiǎn)單,利用定時(shí)器,讓函數(shù)執(zhí)行延遲毫秒,在毫秒內(nèi)如果有函數(shù)又被調(diào)用則刪除上一次調(diào)用,這次調(diào)用毫秒后執(zhí)行,如此往復(fù)這樣就實(shí)現(xiàn)了想要的效果
現(xiàn)在javascript的用途 真的很廣,感覺什么事都可以做,比如做視頻監(jiān)控,時(shí)刻看看你喜歡的人再做什么,哎呀媽呀,這可是犯法的,不行不行。
最近工作上遇到個(gè)需求,:一個(gè)原本是pc端框架配置的需求,現(xiàn)在領(lǐng)導(dǎo)突然急著要,讓我從pc端兼容移動(dòng)的大小,瞬間腦殼疼,由于用的都是px單位,不好真疼,然后就想到根據(jù)瀏覽器窗口改變的時(shí)候需要改一些頁面元素大小 原大小
配置成移動(dòng)的的時(shí)候
function resizehandler(){
console.log(new Date().getTime()); console.log(++n);
}
然后我試著拖拽窗口,看了下控制臺(tái)居然打印了50幾次,這并不是我想要的,作為一個(gè)合理的代碼,是只需要執(zhí)行一次的,可能函數(shù)里面的代碼很復(fù)雜,但卻是我想要的。
網(wǎng)上搜了下JavaScript高級(jí)程序設(shè) 中有專門應(yīng)對(duì)此問題的函數(shù)節(jié)流
原理很簡(jiǎn)單,利用定時(shí)器,讓函數(shù)執(zhí)行延遲500毫秒,在500毫秒內(nèi)如果有函數(shù)又被調(diào)用則刪除上一次調(diào)用,這次調(diào)用500毫秒后執(zhí)行,如此往復(fù)
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);
};
這樣就實(shí)現(xiàn)了想要的效果
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/101809.html
摘要:函數(shù)節(jié)流和去抖的出現(xiàn)場(chǎng)景,一般都伴隨著客戶端的事件監(jiān)聽。函數(shù)節(jié)流的核心是,讓一個(gè)函數(shù)不要執(zhí)行得太頻繁,減少一些過快的調(diào)用來節(jié)流。 概述 也是好久沒更新 源碼解讀,看著房?jī)r(jià)蹭蹭暴漲,心里也是五味雜陳,對(duì)未來充滿恐懼和迷茫 ...(敢問一句你們上岸了嗎) 言歸正傳,今天要介紹的是 underscore 中兩個(gè)重要的方法,函數(shù)節(jié)流和函數(shù)去抖。這篇文章不會(huì)涉及具體的代碼實(shí)現(xiàn)(關(guān)于代碼實(shí)現(xiàn)請(qǐng)期...
摘要:今天和別人聊到函數(shù)的節(jié)流和防抖,發(fā)現(xiàn)自己對(duì)這兩個(gè)的區(qū)別很是模糊,遂小小實(shí)踐一下,在此記錄,希望對(duì)需要的人有所幫助。防抖實(shí)現(xiàn)順利,但是兩個(gè)節(jié)流方法的執(zhí)行結(jié)果存在差異。 今天和別人聊到JavaScript函數(shù)的節(jié)流和防抖,發(fā)現(xiàn)自己對(duì)這兩個(gè)的區(qū)別很是模糊,遂小小實(shí)踐一下,在此記錄,希望對(duì)需要的人有所幫助。 節(jié)流 - 頻繁操作,間隔一定時(shí)間去做一件事 舉例說明:假定時(shí)間間隔為 500ms,頻繁...
摘要:每次鼠標(biāo)移動(dòng)都是這樣的處理過程,直到鼠標(biāo)不再移動(dòng)一秒鐘后,定時(shí)器中的函數(shù)才被使用。 函數(shù)節(jié)流的原理 函數(shù)節(jié)流,就是對(duì)會(huì)頻繁觸發(fā)的函數(shù)事件做一些限制,讓這些函數(shù)可以在每隔一定的時(shí)間或者每次滿足一定的條件下再觸發(fā)。一般我們會(huì)給他起一個(gè)名字throttle。也就是節(jié)流的意思。一般這樣的函數(shù)有 resize事件、ontouchmove事件等。 舉個(gè)簡(jiǎn)單的例子 測(cè)試函數(shù)節(jié)...
摘要:網(wǎng)上搜了下高級(jí)程序設(shè)中有專門應(yīng)對(duì)此問題的函數(shù)節(jié)流原理很簡(jiǎn)單,利用定時(shí)器,讓函數(shù)執(zhí)行延遲毫秒,在毫秒內(nèi)如果有函數(shù)又被調(diào)用則刪除上一次調(diào)用,這次調(diào)用毫秒后執(zhí)行,如此往復(fù)這樣就實(shí)現(xiàn)了想要的效果 現(xiàn)在javascript的用途 真的很廣,感覺什么事都可以做,比如做視頻監(jiān)控,時(shí)刻看看你喜歡的人再做什么,哎呀媽呀,這可是犯法的,不行不行。 最近工作上遇到個(gè)需求,:一個(gè)原本是pc端框架配置的需求,現(xiàn)...
閱讀 2598·2023-04-26 03:00
閱讀 1410·2021-10-12 10:12
閱讀 4208·2021-09-22 15:33
閱讀 2933·2021-09-22 15:06
閱讀 1545·2019-08-30 15:44
閱讀 2160·2019-08-30 13:59
閱讀 544·2019-08-30 11:24
閱讀 2433·2019-08-29 17:07