文字印表機 效果實現

簡單的文字印表機 效果

很久沒寫過 juqey, 看招聘資訊 裡面都是 什麼 精通jquey、 react、 vue 諸如此類。。。
精通離我很遠， 熟練也不敢說。 也就是簡簡單單的貌似掌握。
看見一個部落格裡的效果， 突然自己想實現。 簡簡單單 寫個 jquery 外掛。

給jquery 增加 fadeText 方法
引數 options
options.time 時間 文字插入間隔
options.text 待插入的文字
options.fn // 為 fn 提供 三個 引數函式 (stopFadeText, goOn, end)
stopFadeText 停止文字漸進效果
goOn 恢復文字漸進效果
end 結束 文字漸進效果， 立即到漸進效果最後一幀。

$.fn.extend({
    fadeText (options) {
        var time = options.time || 200
        var text = options.text.toString()
        var fn = options.fn || function () {}
       // 當前字串 下標
        var index = 0
       // 字串 總長度
        var length = text.length
        // 記錄定時器 id 的
        var k = null
        // 記錄 this    
        var that = this
        console.log(fn)
        var fadeText = function () {
            index ++;
            k !== null && clearTimeout(k)
            console.log(text.substr(0, index))
            //裁切 text 從第一位開始 長度為 index 的字串
            that.text(text.substr(0, index))
            console.log($(that))
            if (index > length - 1)
                return
            k = setTimeout(fadeText, time)
        }
        var stopFadeText = function () {
            clearTimeout(k)
            k = null
        }
        var goOn = function () {  
            if ( k !== null) {
                index --
                fadeText()
            }      
        }
        var end = function () {
            clearTimeout(k)
            that.text(text.substr(0, length - 1))
        }
        fadeText()
        fn(stopFadeText, goOn, end)
        return this
    }
})

demo測試地址