javascript - 完全 Javascript Ajax 旋转器？

Question

我认为 Ajax 旋转器确实很棒，但图像旋转实际上显示有一些延迟或加载太早，我想也许我可以使用这些老式字符来提供更准确的 ajax 事件反馈。
|、/、—、\

假设目标段落名为 <p id="target"></p> 我怎样才能互换该段落中的这些字符而不占用太多资源，我已经在项目中加载了 JQuery。

非常感谢大家!

Answer 1

这允许您同时拥有多个加载指示器。只需将它们存储在变量中，并在不再需要时调用 stop() 即可。

[See it in action ]

function loader(el, delay) {
  if (typeof el === "string")
    el = document.getElementById(el);
  if (!el) 
    return;
  delay = delay || 100;
  var chars = "|/-\\".split("");
  var i = 0;
  var timer = setInterval(function(){
    el.innerHTML = chars[ i++ % chars.length ];
  }, delay);
  // public method to stop the animation
  this.stop = function() {
    clearInterval(timer);
  }
}


// make a new loader and start animation
var ld1 = new loader("loader"); // or loader($("#loader")[0]); 

// content is loaded stop animation
ld1.stop();