如何只運行一次JS函數？

Question

當用戶從我的網站滾動到特定元素ID時，我想觸發一個彈出窗口。

目前，我可以執行此操作，但是它可以循環工作，並且在執行一次之后無法停止該功能。

遵循我的JS代碼：

$(window).scroll(function() {
 var executed = false;
  if (!executed){ 
  executed = true;
      var hT = $('#scroll-to').offset().top,
      hH = $('#scroll-to').outerHeight(),
      wH = $(window).height(),
      wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
   <!--
     window.setTimeout('window.location="javascript:showSuccessToast();"; ',2000);
     // -->
  }}
  });

當“已執行”變量變為true時，我不明白為什么要執行該函數。 我如何管理它只觸發一次showscessToast ？

Answer 1

你的函數從頭開始執行每一個事件被觸發的時間-這包括初始化executed 。 換句話說，每次函數運行時，您都將executed設置為false！

要解決此問題，您需要將變量定義拉到函數外部：

var executed = false;

$(window).scroll(function() {
    if (!executed) { 
        executed = true;

        ...
    }
});

Answer 2

另一個選擇是使用unbind（），如以下JS代碼所示：

$(window).scroll(myScrollFunction);
function myScrollFcuntion()
{
    // do things
    $(window).unbind("scroll", myScrollFunction);
}

Answer 3

當滾動事件發生時，執行的var始終設置為false。 這意味着它對您的功能沒有用。

將已執行的事件函數放出來應該可以工作。

   var executed = false;
$(window).scroll(function() {
  var hT = $('#scroll-to').offset().top,
  hH = $('#scroll-to').outerHeight(),
  wH = $(window).height(),
  wS = $(this).scrollTop();
 if (wS > (hT+hH-wH)){
if (!executed){ executed = true;
     <!--
     window.setTimeout('window.location="javascript:showSuccessToast();"; ',20);
     // -->
 }}
 });