javascript - 我怎样才能使这个活跃的点击？

Question

var span = document.getElementById('loading_dots');

var int = setInterval(function() {
    if ((span.innerHTML += '●').length == 4) 
        span.innerHTML = '';
}, 400);

(function(){
    var loading_dots = document.getElementById("loading_dots"),

      show = function(){
        loading_dots.style.display = "block";
        setTimeout(hide, 5000); // 5 seconds
      },

      hide = function(){
        loading_dots.style.display = "none";
      };

    show();
})();

我怎样才能使它在单击按钮时开始加载点，并在每次单击按钮时重新激活？底部功能是在 5 秒后停止它，也许可以将其合并为一个功能？

需要为 3 个单独的按钮工作并在单击每个按钮时重新启动，还需要在<span class="loading_dots" id="loading_dots"></span>任何方法中显示，css、jquery 或 javascript

标签： javascripthtmlcssarraysfunction

Answer 1

这是一个 jQuery 版本：

(function ( $ ) {
 
    $.fn.loader = function( options ) {
      var settings = $.extend({
            text:"●",
            spn: undefined
        }, options );
        
        
        $.each(this, function(){
        var btn = this;      
        var int;
        var spn;
        if (settings.spn === undefined) {
         spn = $("<span/>" , { "class":"loading_dots" });
         $(btn).append(spn);
        } else {
          spn= $(settings.spn);
         }
         var show = function(){
         btn.setAttribute("disabled", "disabled")
         clearInterval(int);
         spn.show();
         int = setInterval(function() {
         if ((spn[0].innerHTML += settings.text).length == 4) 
           spn.html("");
        }, 400);
         setTimeout(hide, 5000); // 5 seconds
        }
        
        var hide = function (){
        spn.hide();
        btn.removeAttribute("disabled", "disabled")
        clearInterval(int);
        }
        
        btn.addEventListener("click", show);
       });
    };
 
}( jQuery ));

// now bind it by its class, this only need to be run once every time new button is added to the html
$(".btn").loader({spn:".loading_dots"});

// and you could also specify the text by 
// $(".btn").loader({text: "*"});

.loading_dots {
color:red;
display:none;
width:100%;
}

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

<div>
<span class="loading_dots"></span>
<button class="btn" type="button" >
submit
</button>


<button class="btn" type="button" >
submit
</button>
</div>