笔墨打印机 结果完成

简朴的笔墨打印机 结果

很久没写过 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测试地点

    原文作者:L6zt
    原文地址: https://segmentfault.com/a/1190000013581296
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞