js给文字依次添加动画问题

Question

问题: 给文字添加动画让其依次(间隔100ms)展现出来,下面的代码出了什么问题啊? 或者给出其他更好的方案

<ul class="u1"></ul>

$(function () {
    var str = '线性变换保留了直线和平行线，线性变换保留直线的同时，其他的几何性质如长度、角度、面积和体积可能被变换改变了。简单的说，线性变换可能“拉伸”坐标系，但不会“弯曲”或“卷折”坐标系。这个函数主要是将我们的连接线在拖动弹力球后被拖拉的连接线的进行一个“变化矩阵”的操作'
    var arr = str.split('');
    for (var i = 0; i < arr.length; i++) {
        setTimeout(function() {
            console.log(arr[i]); // undefined?
            $('.u1').append('<span class="anim zoomInRight">' + arr[i] + '</span>');
        }, 100 * i);
    }
});

目前的效果如图(动画没问题,只是文字没出来):

想要的结果:

Answer 1

var 改成 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);
    }

或者

    (function(i){
            setTimeout(function() {
            $('.u1').append('<span class="anim zoomInRight">' + arr[i] + '</span>');
        }, 100 * i);
        })(i);

Answer 2

首先，字符串可以for循环遍历 不用转成数组 其次，setTimeout是异步的 它内部保存着对i的引用，在100毫秒后调用定时器时，循环早已结束。函数执行调用i时，i的值为字符串的长度，arr[i]就是undefined。可以这样修改：
(function(i){setTimeout(function() {

        console.log(arr[i]); // undefined?
        $('.u1').append('<span class="anim zoomInRight">' + arr[i] + '</span>');
    }, 100 * i)})(i);

Answer 3

作用域的问题，i在settimeout里面是没有定义的值，所以是undefined

Answer 4

$('.u1').append('<span class="anim zoomInRight">' + arr[i] + '</span>');console.log(i);

后面加个i,看看执行的时候i是几。
然后去搜下，循环闭包。