javascript阻止scroll事件多次執行的思路及實作_javascript技巧

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

原始碼：

複製程式碼 程式碼如下:

程式碼如下:

程式碼如下:



程式碼如下:

程式碼如下: 程式碼如下：window.onscroll = function(){

alert("haha");

}


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

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

複製程式碼

程式碼如下: //測試程式碼: function haha​​(aha) { 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​​(ahaa) {alert("haha"); tur = true; } window.onscroll = function(){ if(tur){ setTimeout(haha,1000); tur = false; } else{ } }