鍍金池/ 問答/HTML/ js給文字依次添加動(dòng)畫問題

js給文字依次添加動(dòng)畫問題

問題: 給文字添加動(dòng)畫讓其依次(間隔100ms)展現(xiàn)出來,下面的代碼出了什么問題啊? 或者給出其他更好的方案

<ul class="u1"></ul>
$(function () {
    var str = '線性變換保留了直線和平行線，線性變換保留直線的同時(shí)，其他的幾何性質(zhì)如長度、角度、面積和體積可能被變換改變了。簡單的說，線性變換可能“拉伸”坐標(biāo)系，但不會(huì)“彎曲”或“卷折”坐標(biāo)系。這個(gè)函數(shù)主要是將我們的連接線在拖動(dòng)彈力球后被拖拉的連接線的進(jìn)行一個(gè)“變化矩陣”的操作'
    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);
    }
});

目前的效果如圖(動(dòng)畫沒問題,只是文字沒出來):
圖片描述

想要的結(jié)果:
圖片描述

回答
編輯回答
雨蝶

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);
2017年6月28日 19:46
編輯回答
歆久

作用域的問題，i在settimeout里面是沒有定義的值，所以是undefined

2017年4月6日 07:48
編輯回答
心夠野

首先，字符串可以for循環(huán)遍歷 不用轉(zhuǎn)成數(shù)組 其次，setTimeout是異步的 它內(nèi)部保存著對(duì)i的引用，在100毫秒后調(diào)用定時(shí)器時(shí)，循環(huán)早已結(jié)束。函數(shù)執(zhí)行調(diào)用i時(shí)，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);
2018年7月31日 20:15
編輯回答
詆毀你
$('.u1').append('<span class="anim zoomInRight">' + arr[i] + '</span>');console.log(i);

后面加個(gè)i,看看執(zhí)行的時(shí)候i是幾。
然后去搜下，循環(huán)閉包。

2017年8月6日 03:20