Javascript 如何防止jQuery函数被多次初始化（涉及Drupal行为）？

我的目标： 允许用户加载模板（其中包含预设jquery、html和css），以允许他们单击五个点中的一个，从而在图像上触发动画

我的问题： 当我将这些模板中的多个加载到我的页面时，我的动画值（在本例中为左边距）应用的次数是页面上该模板实例的两倍。如果我的模板加载了两次，左边距将设置为一个值，跳转到正确的值，然后返回，最后设置为正确的值。这意味着，如果向页面添加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);

（函数（$）{
Drupal.behaviors.click\u\u点={
附加：功能（上下文、设置）{
$（'.wrapper\u class'，context）。一旦（'单击点'，函数（）{
//防止其他按钮被单击，直到
//上一个动画已完成。
var animationDone=false；
函数clickDots（dotNum）{
$（'.dot\u class\u num.'+dotNum）。单击（函数（）{
//设置上下文，将动画保留到存在点的容器中。
var findElem=$（this.parent（）.parent（）.parent（）.find（'.inner_wrapper'）；
//防止其他按钮被单击，直到
//上一个动画已完成。
如果（animationDone==false）{
animationDone=true；
//找到可见的图像。
var animatingImage=findElem.find（'.dot_class_num_active'）；
//查找将在中设置动画的图像。
var thismageanim=findElem.find（'.dot_num_img_src_'+dotNum）；
if（animatingImage.is（thisImageAnim））{
//在单击另一个点之前，不能再次单击同一点。
animationDone=false；
返回；
}否则{
//为已经可见的图像设置动画。
//删除visible image类，因为它将被隐藏。
findElem.find（'.dot_class_num_active'）.removeClass（'dot_class_num_active'）；
//设置动画使其向左隐藏。
设置图像动画({
边际收益：'-10%'，
不透明度：0
}，280，“easeInOutQuad”）；
//在与点单击关联的图像中设置动画
//将图像css设置为更右，以便在0处向左设置动画。
thisImageAnim.css（'margin-left'，'10%'）。延迟（200）。动画({
marginLeft:'0'，
不透明度：1
}，300，'easeInOutQuad'，函数（）{
//将现在可见的图像设置为可见图像。
thisImageAnim.addClass（'dot_class_num_active'）；
}).promise（）.done（函数（）{
//现在允许单击其他点。
animationDone=false；
});
}
}
});
}
//五个点中的每一个。
例如（i=1；i我发现了我的问题所在-我将行为附加到我的内容的包装类，即
$（'.wrapper_class'，context）。曾经…
-这意味着它将行为附加到这个类的每个实例，其中可能有很多实例

我所做的是将行为附加到一个更高的父元素，我知道只有一个实例，它只附加一次，代码工作得非常完美

感谢上面的评论者帮助我认识到我的问题！
“我想根据需要添加尽可能多的jQuery实例”。不，jQuery（或任何其他脚本）在呈现给浏览器的任何完整页面中，无论发生什么情况，都应该只引用一次。否则，您将面临发生您所描述的不可预测行为的风险。@ADyson我认为我的措辞不正确。我的意思是我想确保此jQuery只添加一次，但可以添加包含它的模板。\n无数次。那么，是否有办法查看jQuery行为或函数是否已添加，如果已添加，请不要再次加载它？或者再次运行它…我不知道Drupal的具体情况，但实际代码本身可以在添加自身之前检查是否已存在具有该名称的行为。@ADyson检查是否有意义…是否有如何处理这个问题？我不确定如何检查该范围内的某些内容。您能否检查
Drupal.behaviors。单击\u点
是否已经存在（检查它是否已经是一个对象）我也不知道Drupal是如何处理这些东西的，但是作为一个基本的JS原则，你可以检查对象是否存在，这应该告诉你它是否已经被定义了。