如何僅在第一次使用 javascript 滾動頁面時發出警報？

Question

如何僅在第一次使用 javascript 滾動頁面時發出警報？

我只想提醒第一個滾動頁面，我該怎么做？

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(window).scroll(function() { var xxx; if (xxx === '') { var xxx = "test"; var div = $("#myDiv"); alert(div.height()); } }); </script> <DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 1

使用.one()

將處理程序附加到元素的事件。 每個事件類型的每個元素最多執行一次處理程序。

$(window).one("scroll", function() {
    console.log("foo");
});

代碼片段：

 $(window).one("scroll", function() { console.log("foo"); });

 div { height: 1000px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>foo</div>

Answer 2

將變量設置為全局變量並使用布爾值而不是字符串，這是使用代碼標志時更好的做法。此外，在滾動函數中設置變量時無需重新定義變量。

 var xxx; $(window).scroll(function () { if(!xxx) { xxx = true; var div = $("#myDiv"); alert(div.height()); } });

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 3

 onscroll = function () { var xxx = "test"; var div = $("#myDiv"); alert(div.height()); onscroll = null; // remove function so wont get called next time };

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 4

此代碼只會在用戶在頁面上進行的第一次滾動時發出警報。

 var scrolled = false; $(window).scroll(function() { if (scrolled == false) { alert("You Have Just Scrolled"); scrolled = true; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div> <div>This is some text</div>