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,istaysettimeoutThere 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.