The current effect is like picture (animation is OK, only text does not come out):
Desired results:
var Change to let
for (let i = 0; i < arr.length; i++) {
setTimeout(function() {
console.log(arr[i]); // undefined?
$('.u1').append('<span class="anim zoomInRight">' + arr[i] + '</span>');
}, 100 * i);
}
perhaps
(function(i){
setTimeout(function() {
$('.u1').append('<span class="anim zoomInRight">' + arr[i] + '</span>');
}, 100 * i);
})(i);
First, the string can be traversed in the for loop without turning into an array, and setTimeout is asynchronous and it keeps a reference to the I, and the loop is over when the timer is called after 100 milliseconds. When the function executes calling I, the value of I is the length of the string, arr[iThat’s undefined. It can be modified as follows:
(function(i){setTimeout(function() {
console.log(arr[i]); // undefined?
$('.u1').append('<span class="anim zoomInRight">' + arr[i] + '</span>');
}, 100 * i)})(i);
The problem of the scope of action,i
staysettimeout
There is no defined value in it, so it isundefined
$('.u1').append('<span class="anim zoomInRight">' + arr[i] + '</span>');console.log(i);
Add a I in the back and see what I is at the time of execution.
Then go to the search, circulate the closure.