javascript阻止scroll事件多次執(zhí)行的思路及實(shí)現(xiàn)
更新時(shí)間：2013年11月08日 17:34:55 投稿：whsnow
阻止scroll事件多次執(zhí)行主要是為了解決一些常見(jiàn)網(wǎng)頁(yè)特效在js解析時(shí)預(yù)期與效果不同，感興趣的朋友可以了解下
寫這個(gè)主要是為了解決一些常見(jiàn)網(wǎng)頁(yè)特效在js解析時(shí)預(yù)期與效果不同。
原始代碼 ：
復(fù)制代碼 代碼如下:
//測(cè)試代碼
window.onscroll = function(){
alert("haha");
}
裝在script標(biāo)簽內(nèi) 鼠標(biāo)滑動(dòng)之后一直惦記 提示框才可以，所以很不方便 ，
而且 目的是鼠標(biāo)滑動(dòng)后 只執(zhí)行一次事件，這個(gè)效果顯然和實(shí)際不符合吧。
//代碼改進(jìn)--增加延時(shí)器。
既然scroll事件是一個(gè)連續(xù)觸發(fā)事件，那我設(shè)置一個(gè)延遲器，在用戶滑動(dòng)鼠標(biāo)的時(shí)間后執(zhí)行該函數(shù) ，書(shū)不是就可以只執(zhí)行一次啦 。
復(fù)制代碼 代碼如下:
//測(cè)試代碼:
function haha(){
alert("haha");
}
window.onscroll = function(){
setTimeout(haha,500);
}
結(jié)果發(fā)現(xiàn)該死的 還是和上面一樣 要彈出很多的警告框--可見(jiàn) scroll事件像隊(duì)列一樣排成一行 ，按順序執(zhí)行 ，所以此路不通，另想辦法啊。
通過(guò)條件控制事件執(zhí)行 ，這個(gè)是個(gè)不錯(cuò)的方法
復(fù)制代碼 代碼如下:
function haha(){
alert("haha");
}
var tur = true; //創(chuàng)建條件
window.onscroll = function(){
if(tur){ setTimeout(haha,500); tur = false; }
else
{}
}
慶幸的是，鼠標(biāo)滾動(dòng)執(zhí)行一次代碼 ，問(wèn)題是 當(dāng)再次滾動(dòng)鼠標(biāo)之后 ，事件再也不執(zhí)行了。
原因就是條件被設(shè)置為false 所以后續(xù)的事件永遠(yuǎn)不執(zhí)行了。
思路就是 條件判斷+延遲執(zhí)行 就可以解決這個(gè)問(wèn)題。在事件執(zhí)行之初，復(fù)活變量。
復(fù)制代碼 代碼如下:
var tur = true;
function haha(){alert("haha"); tur = true; }
window.onscroll = function(){
if(tur){ setTimeout(haha,1000); tur = false;
}else{ }
}
相關(guān)文章
json 帶斜杠時(shí)如何解析的實(shí)現(xiàn)
這篇文章主要介紹了json 帶斜杠時(shí)如何解析的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
微信小程序自定義頂部導(dǎo)航欄并適配不同機(jī)型實(shí)例詳解
這篇文章主要為大家介紹了微信小程序開(kāi)發(fā)自定義頂部導(dǎo)航欄并適配不同機(jī)型的實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
javascript 對(duì)象比較實(shí)現(xiàn)代碼
js對(duì)象比較實(shí)現(xiàn)代碼。2009-04-04
主要是測(cè)試了數(shù)組 push()方法與直接相加這兩種在JS引擎上性能的實(shí)際處理情況。程序代碼簡(jiǎn)單明了，沒(méi)什么好解釋的。2009-12-12
JavaScript雙問(wèn)號(hào)(??)操作符用法詳解
在現(xiàn)代JavaScript開(kāi)發(fā)中,處理變量默認(rèn)值是一個(gè)常見(jiàn)但容易引發(fā)bug的操作,很多開(kāi)發(fā)者可能都遇到過(guò)這樣的問(wèn)題：使用||設(shè)置默認(rèn)值時(shí),意外覆蓋了0、''等合法值,這時(shí)候,ES2020引入的雙問(wèn)號(hào)操作符（??）就能完美解決這類問(wèn)題,本文將帶您全面掌握這個(gè)操作符的使用場(chǎng)景和高級(jí)技巧2025-04-04
用js閉包的方法實(shí)現(xiàn)多點(diǎn)標(biāo)注冒泡示例
這篇文章主要介紹了用js閉包的方法實(shí)現(xiàn)多點(diǎn)標(biāo)注冒泡,需要的朋友可以參考下2014-05-05
JavaScript判斷表單中多選框checkbox選中個(gè)數(shù)的方法
這篇文章主要介紹了JavaScript判斷表單中多選框checkbox選中個(gè)數(shù)的方法,涉及javascript針對(duì)checkbox復(fù)選框的遍歷與判斷技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了使用JS在父頁(yè)面和子頁(yè)面間相互傳值方法,子頁(yè)面可以是window.open彈出的,也可以是iframe框架中的頁(yè)面,需要的朋友可以參考下2014-03-03
微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
首先是通過(guò)同步策略來(lái)實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離，接著是通過(guò)異步策略來(lái)實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離2012-08-08