如何防止jQuery函數被多次初始化（包含Drupal行爲）？

我的目標： 使用戶能夠加載模板（其中包含預設的jquery，html和css），以允許他們點擊五個點之一來觸發圖像上的動畫。如何防止jQuery函數被多次初始化（包含Drupal行爲）？

我的問題： 當我加載這些模板到我的網頁一多，我的動畫值（利潤率左在這種情況下）適用的次雙數，有對這個模板的實例頁。如果我的模板被加載了兩次，左邊距設置爲一個值，跳轉到正確的值，然後返回，然後才能最終設置正確的值。這意味着如果我將10個實例添加到頁面中，則需要20倍的時間才能獲得最後一個值。

測試之前，我以爲我的代碼將是確定的，因爲由於環境和.once()功能，我認爲它只會觸發一次。

如預期的HTML和CSS正在運作，它只是jQuery是一個問題。

我的代碼：

(function ($) { 
Drupal.behaviors.click_the_dots = { 
    attach: function (context, settings) { 
    $('.wrapper_class', context).once('click_the_dots', function() { 
    // Prevent other buttons from being clickable until the 
    // previous animation is complete. 
    var animationDone = false; 

    function clickDots(dotNum) { 
     $('.dot_class_num_' + dotNum).click(function() { 
     // Setup context, to keep animations to the container in which the dots exist. 
     var findElem = $(this).parent().parent().parent().find('.inner_wrapper'); 
     // Prevent other buttons from being clickable until the 
     // previous animation is complete. 
     if (animationDone === false) { 
      animationDone = true; 
      // Find the visible image. 
      var animatingImage = findElem.find('.dot_class_num_active'); 
      // Find the image that will be animating in. 
      var thisImageAnim = findElem.find('.dot_num_img_src_' + dotNum); 
      if (animatingImage.is(thisImageAnim)) { 
      // Can't click on the same dot again, until another dot is clicked. 
      animationDone = false; 
      return; 
      } else { 
      // Animate out the already visible image. 
      // Remove the visible image class as it's going to be hidden. 
      findElem.find('.dot_class_num_active').removeClass('dot_class_num_active'); 
      // Animate it to hide to the left. 
      animatingImage.animate({ 
       marginLeft: '-10%', 
       opacity: 0 
      }, 280, 'easeInOutQuad'); 
      // Animate in the image associated with the dot click 
      // Set the image css to be further right in order to animate to left at 0. 
      thisImageAnim.css('margin-left', '10%').delay(200).animate({ 
       marginLeft: '0', 
       opacity: 1 
      }, 300, 'easeInOutQuad', function() { 
       // Set the now visible image to the visible image. 
       thisImageAnim.addClass('dot_class_num_active'); 
      }).promise().done(function() { 
       // Now allow the other dots to be clicked. 
       animationDone = false; 
      }); 
      } 
     } 
     }); 
    } 

    // For each of the five dots. 
    for (i = 1; i <= 5; i++) { 
     clickDots(i); 
    } 
});}};})(jQuery);

我想根據需要添加這個jQuery的多個實例，但只有具備的功能，通過一次循環。我不確定如何檢查這項工作是否已經完成，或者如何確保一旦完成至少一次，就不會再發生。

來源

2017-06-01 Rebecca O' Sullivan

「我想根據需要添加這個jQuery的多個實例」。不，jQuery（或任何其他腳本）只能在呈現給瀏覽器的任何完整頁面中引用一次，無論如何。否則，你會冒着像你所描述的不可預測行爲的風險。 – ADyson

@ADyson我認爲我的措辭在那裏不正確。我的意思是我想確保這個jQuery只添加一次，但是攜帶它的模板可以多次添加。那麼有沒有辦法查看是否已經添加了jQuery行爲或函數，如果有，請不要再次加載它？或者再次運行它... –

我不明白Drupal，但實際的代碼本身可以在添加自己之前檢查具有該名稱的行爲是否已經存在。 – ADyson

我想通了什麼我的問題是 - 我的行爲附着在包裝類我的內容，即$('.wrapper_class', context).once... - 這意味着它重視的行爲這一類的每個實例，其中可能有很多。

我所做的就是附加的行爲到一個更高的父元素，其中我知道會有隻有一個實例。它只附加一次，代碼完美工作。

由於上述誰幫我實現我的問題提意見！

來源

2017-06-02 14:09:44

如何防止jQuery函數被多次初始化（包含Drupal行爲）？

回答

相關問題