如何防止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行为）？

回答

相关问题