javascript阻止scroll事件多次執行的思路及實現

2019-11-20 21:45:07

字體：大中小

來源：轉載

供稿：網友

寫這個主要是為了解決一些常見網頁特效在js解析時預期與效果不同。

原始代碼：

 
//測試代碼 
window.onscroll = function(){ 
alert("haha"); 
} 

裝在script標簽內鼠標滑動之后一直惦記提示框才可以，所以很不方便，
而且目的是鼠標滑動后只執行一次事件，這個效果顯然和實際不符合吧。

//代碼改進--增加延時器。
既然scroll事件是一個連續觸發事件，那我設置一個延遲器，在用戶滑動鼠標的時間后執行該函數，書不是就可以只執行一次啦。

復制代碼代碼如下:

 
//測試代碼: 
function haha(){ 
alert("haha"); 
} 
window.onscroll = function(){ 
setTimeout(haha,500); 
} 

結果發現該死的還是和上面一樣要彈出很多的警告框--可見 scroll事件像隊列一樣排成一行，按順序執行，所以此路不通，另想辦法啊。

通過條件控制事件執行，這個是個不錯的方法

復制代碼代碼如下:

 
function haha(){ 
alert("haha"); 
} 
var tur = true; //創建條件 
window.onscroll = function(){ 
if(tur){ setTimeout(haha,500); tur = false; } 
else 
{} 
} 

慶幸的是，鼠標滾動執行一次代碼，問題是當再次滾動鼠標之后，事件再也不執行了。
原因就是條件被設置為false 所以后續的事件永遠不執行了。

思路就是條件判斷+延遲執行就可以解決這個問題。在事件執行之初，復活變量，事件執行完畢后殺死變量。

復制代碼代碼如下:

 
var tur = true; 
function haha(){alert("haha"); tur = true; } 

window.onscroll = function(){ 
if(tur){ setTimeout(haha,1000); tur = false; 
}else{ } 
} 

上一篇：window.onresize 多次觸發的解決方法

下一篇：setTimeout和setInterval的深入理解