[分享]文字打印机 效果实现

简单的文字打印机 效果

很久没写过 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
    }
})