javascript阻止scroll事件多次執(zhí)行的思路及實(shí)現(xiàn)
更新時(shí)間：2013年11月08日 17:34:55 投稿：whsnow
阻止scroll事件多次執(zhí)行主要是為了解決一些常見網(wǎng)頁(yè)特效在js解析時(shí)預(yù)期與效果不同，感興趣的朋友可以了解下
寫這個(gè)主要是為了解決一些常見網(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ù) ，書不是就可以只執(zhí)行一次啦 。
復(fù)制代碼 代碼如下:
//測(cè)試代碼:
function haha(){
alert("haha");
}
window.onscroll = function(){
setTimeout(haha,500);
}
結(jié)果發(fā)現(xiàn)該死的 還是和上面一樣 要彈出很多的警告框--可見 scroll事件像隊(duì)列一樣排成一行 ，按順序執(zhí)行 ，所以此路不通，另想辦法啊。
通過條件控制事件執(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í)行一次代碼 ，問題是 當(dāng)再次滾動(dòng)鼠標(biāo)之后 ，事件再也不執(zhí)行了。
原因就是條件被設(shè)置為false 所以后續(xù)的事件永遠(yuǎn)不執(zhí)行了。
思路就是 條件判斷+延遲執(zhí)行 就可以解決這個(gè)問題。在事件執(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)文章
這篇文章主要介紹了詳解基于Wepy開發(fā)小程序插件(推薦)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-08-08
echarts實(shí)現(xiàn)地圖定時(shí)切換散點(diǎn)與多圖表級(jí)聯(lián)聯(lián)動(dòng)詳解
這篇文章主要給大家介紹了關(guān)于echarts實(shí)現(xiàn)地圖定時(shí)切換散點(diǎn)與多圖表級(jí)聯(lián)聯(lián)動(dòng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
這篇文章主要給大家介紹了利用d3.js實(shí)現(xiàn)立體柱圖的方法，文中給出了詳細(xì)的介紹和示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-04-04
Openlayers實(shí)現(xiàn)根據(jù)半徑繪制圓形
這篇文章主要介紹了利用Openlayers實(shí)現(xiàn)繪制三個(gè)圓形，繪制完成之后，三個(gè)圓心連接起來，然后標(biāo)記出每?jī)蓚€(gè)圓心之間的距離，感興趣的可以了解一下2022-08-08
Bootstrap簡(jiǎn)單實(shí)用的表單驗(yàn)證插件BootstrapValidator用法實(shí)例詳解
這篇文章主要介紹了Bootstrap簡(jiǎn)單實(shí)用的表單驗(yàn)證插件BootstrapValidator用法,結(jié)合實(shí)例形式詳細(xì)分析了Bootstrap表單驗(yàn)證插件BootstrapValidator基本功能、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue組件創(chuàng)建的三種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
切換面板具備功能：鼠標(biāo)劃過不同的題目會(huì)有不同的圖片和解說，可以連接到不同的網(wǎng)站，實(shí)例代碼如下，感興趣的朋友可以參考下哈2013-06-06
Bootstrap實(shí)現(xiàn)的標(biāo)簽頁(yè)內(nèi)容切換顯示效果示例
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)的標(biāo)簽頁(yè)內(nèi)容切換顯示效果,結(jié)合完整實(shí)例形式分析了基于Bootstrap實(shí)現(xiàn)的標(biāo)簽頁(yè)內(nèi)容切換顯示功能相關(guān)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2017-05-05
swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法
假設(shè)當(dāng)前顯示的是1，往左滑動(dòng)一個(gè)遞減1，往右滑動(dòng)一個(gè)遞增1。下面通過實(shí)例代碼給大家講解swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2018-01-01
老生常談JavaScript面向?qū)ο蠡A(chǔ)與this指向問題
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript面向?qū)ο蠡A(chǔ)與this指向問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10