【代码笔记】【jQuery】自定义函数效果让文字一个一个显示出来

r囧r小猫 2022-05-23 04:15 184阅读 0赞

用jQuery写了一个方便简洁的函数 实现让文字一个一个显示出来的效果

自定义函数
    
    $.LoadCommandLine = function (arr,callback) { 
        if (arr.length > 0) {
            //处理逻辑 ①
    
            //显示 ②
            var id = getRandomString(5);
            $("#pre").append('<pre id="' + id + '" class="pre"></pre>');
            var index = 0;
            var IntervalId = 0;
            var r = RandomNum(10, 200); //假装在处理，时快时慢
            IntervalId = setInterval(function () { 
    
                $("#" + id).text(arr[0].substring(0, index++));
                if (index > arr[0].length) {
                    clearInterval(IntervalId);
                }
                //console.log(index + " " + str.length);
            }, r);
    
            //下一个 
            setTimeout(function () { 
                $.LoadCommandLine(arr.slice(1), callback);
            }, (r * arr[0].length));
    
            if ($(".pre").length > 5) $("#pre").find("pre:first-child").remove();
    
        }else{ callback(); }
    }

html部分
    
    <div id="pre"></div>

//使用
            $.LoadCommandLine([
                '正在初始化...',
                '加载xx...',
                '加载模块...',
                '加载脚本...',
                '启动完毕...',
                '欢迎使用！'
           ], function () { 
                alert('显示完毕！');
            });

实际应用场景：① 异步线程处理逻辑 ②回调显示

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义一个死锁

在锁o1释放之前需要等待锁o2的释放在锁o2释放之前需要等待锁o1的释放. 死在无限等待对方释放锁的循环中.... 这只是一个简单的死锁:A需要B,B需要A 复杂一些

╰+哭是因爲堅強的太久メ/ 2024年02月18日 15:10/ 0 赞/ 73 阅读

相关 SpringBoot自定义一个convert

当对于页面请求过来的数据Spingboot自带的124个convert不满足我们的需求，即我们需要进行特殊的分解规则的时候就可以自定义一个convert 那么如何自定义呢，可

矫情吗；*/ 2023年10月11日 20:28/ 0 赞/ 52 阅读

相关自定义超链接文字提示效果

自定义超链接文字提示和自带的超链接提示相比具有响应时间更快，更加美观的优点~ 1 / 超链接文字提示 / 2 $(function(){ 3

女爷i/ 2023年08月17日 17:20/ 0 赞/ 63 阅读

相关 Java随笔记 - 实现一个自定义的BitMap

Java随笔记 - 实现一个自定义的BitMap preview 对于刷OJ的人来说，卡内存的题一定不陌生，而面对这种题，往往会考虑bit数组能不能派上用场

àì夳堔傛蜴生んèń/ 2022年12月29日 04:46/ 0 赞/ 197 阅读

相关 css实现一个提示文字的抖动效果

代码 <style> .errtips { color:e40438 animation-name: errtips; animation-duration: 0.5

Dear 丶/ 2022年09月04日 05:48/ 0 赞/ 270 阅读

相关自定义一个异常类模板代码实例

一：自定义异常类： package 自定义异常; //或者继承RuntimeException（运行时异常） public class My

朴灿烈づ我的快乐病毒、/ 2022年08月05日 05:07/ 0 赞/ 169 阅读

相关如何让一个2D图片实现一个模糊效果

这几天有个项目的界面要实现一个模糊效果~ 效果图如下：![Center][]清晰状态 ![Center 1][]模糊状态其实只要给图片加一个模糊材质球就可以了

谁践踏了优雅/ 2022年06月17日 07:44/ 0 赞/ 189 阅读

相关 js/jquery让数字号码一个一个出来的效果

文章转载自：[http://itbaiduwang.com/q-46.html][http_itbaiduwang.com_q-46.html] IT摆渡网-一个按难度收费的

清疚/ 2022年06月14日 08:51/ 0 赞/ 186 阅读

相关【代码笔记】【jQuery】自定义函数效果让文字一个一个显示出来

用jQuery写了一个方便简洁的函数实现让文字一个一个显示出来的效果自定义函数 $.LoadCommandLine = function (ar

r囧r小猫/ 2022年05月23日 04:15/ 0 赞/ 185 阅读

相关 FormatDate 用户自定义的一个函数!

![None.gif][] create function \[ dbo \] . \[ FormatDate \] ![None.gif][] (

快来打我*/ 2021年11月01日 08:36/ 0 赞/ 324 阅读