Question

我在Codepen上使用了一个模仿字体效果的脚本。 https://codepen.io/gschier/pen/jkivt

在我的页面中，我有一个输入，可使用GeoIP定位用户位置。该Codepen可防止GeoIP由于轮换资金而无法加载，从而阻止了该位置的插入。 GeoIP使用“ window.onload”加载。

有什么建议吗？

var TxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 300 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
  document.body.appendChild(css);
};

html,body {
  font-family: 'Raleway', sans-serif;
  padding: 1em 2em;
  font-size: 18px;
  background: #222;
  color: #aaa
}

h1,h2 {
  font-weight: 200;
  margin: 0.4em 0;
}
h1 { font-size: 3.5em; }
h2 {
  color: #888;
  font-size: 2em;
}

<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<h1>This pen is
  <span
     class="txt-rotate"
     data-period="2000"
     data-rotate='[ "nerdy.", "simple.", "pure JS.", "pretty.", "fun!" ]'></span>
</h1>
<h2>A single &lt;span&gt; is all you need.</h2>

顺便说一下，这是下面的冲突脚本，如下所示：

window.onload = function() {
		
		$.getJSON( "http://jsonip.com/?callback=?", function(data){  
 $.ajax({

    url:"https://cors-anywhere.herokuapp.com/http://www.geoplugin.net/json.gp?ip="+data.ip,
    method:"POST",
    dataType:"JSON",
    success:function(data)
    {

if(data)
{
document.getElementById("presidence").value = data['geoplugin_city']+','+data['geoplugin_region']+','+data['geoplugin_countryName']+'.';
}
else
{
alert('hy');

}
    
    }
   })
 } );
};

<input id="presidence" type="text" readonly  size="30" />

Answer 1

当您将一个功能分配给window.onload时，如果脚本中的其他地方，某个其他功能也被分配给window.onload（在事件触发之前），则对第一个功能的引用将丢失，只有分配给onload的最后一个函数将运行。这就是为什么通常分配给onload并不是一个好主意的原因-它仅限于仅保留对一个函数的引用。请改用addEventListener，它可以处理（大部分）无限数量的附加函数。为了提高可读性，请定义打字机加载函数，并定义用户位置加载函数，然后对两者都使用addEventListener：

function typewriterLoad() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i = 0; i < elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
  document.body.appendChild(css);
}

function userlocationLoad() {
  $.getJSON("http://jsonip.com/?callback=?", function(data) {
    $.ajax({

      url: "https://cors-anywhere.herokuapp.com/http://www.geoplugin.net/json.gp?ip=" + data.ip,
      method: "POST",
      dataType: "JSON",
      success: function(data) {

        if (data) {
          document.getElementById("presidence").value = data['geoplugin_city'] + ',' + data['geoplugin_region'] + ',' + data['geoplugin_countryName'] + '.';
        } else {
          alert('hy');
        }
      }
    })
  });
}

document.addEventListener('DOMContentLoaded', typewriterLoad);
document.addEventListener('DOMContentLoaded', userlocationLoad);

一种替代方法是仅制作一个单个侦听器，并将其传递给调用两者的函数：

document.addEventListener('DOMContentLoaded', () => {
  typewriterLoad();
  userlocationLoad();
});

如何在JS Typewriter中停止旋转？

1 个答案: