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