I don't understand what makes this animation start over and over again and how can I stop this after playing once. Can somebody help me please? To find out which part of the code is responsible for the loop, I deleted different parts of the code one by one to see how the result is affected, but I still couldn't find it.
this is the HTML:
<a href="" class="typewrite" data-period="2000" data-type='[ "Hello.", "My name is B.", "I am just starting with HTML, CSS and JavaScript.", "Please bear with me..."]'>
<span class="wrap"></span>
</a>
and here is the JavaScript:
var TxtType = 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;
};
TxtType.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 = 200 - 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('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #f6fd96}";
document.body.appendChild(css);
};
The animation loop happens at the end of the TxtType.prototype.tick function, when the function calls itself again, recursively:
setTimeout(function() {
that.tick();
}, delta)
setTimeout is a function that runs something after some time. In that case, it is running that.tick() after delta time.
If you want it to loop only once, you can use the this.loopNum information to make a condition around those lines above:
if(this.loopNum < 1) {
setTimeout(function() {
that.tick();
}, delta)
}
u used recursion to call the tick() function every delta ms. This is where the loop is.
TxtType.prototype.tick = function() { // ... setTimeout(function() { that.tick(); }, delta); }
If you want to just this code once. Please add the stop condition for the recursion.
if (this.loopNum < this.toRotate.length) {
setTimeout(function() {
that.tick();
}, delta);
}