집 > 기사 > 웹 프론트엔드 > js 스레드의 경우 - 임의 속도의 타자기 효과 구현

js 스레드의 경우 - 임의 속도의 타자기 효과 구현

php是最好的语言원래의: 2018-08-02 09:29:251420검색

목차
랜덤 속도 타자기

Effect
Code

지식 포인트 인용

타이밍 사용 이벤트 트리거 스레드
이벤트를 사용하여 스레드
스레드
랜덤 번호

빠른 링크

무작위 속도 타자기 효과

효과 ㅋㅋㅋ 환경(예: 브라우저, 노드)은 다중 스레드이며 호스트 환경은 js가 어떤 방식으로든 비동기 속성을 갖도록 만듭니다.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>typeWriter</title>
    <style type="text/css">
        h2,h5,#tooltipMsg,p{            white-space: nowrap;        }
        td{            border: 1px solid #ccc;            height: 50px;            text-align: center;            font-size: 10pt;            padding: 2px;        }
    </style></head><body>
    <h2>实现打字机效果</h2>
    <p id="typeWriterEffect"></p>
    <p id="typeWriterEffect2"></p>
    <script type="text/javascript" src="typeWriter.js"></script></body></html>

어떤 사람들은 타이머 setTimeout과 setinterval의 차이점에 대해 질문할 것입니다. js 스레드의 경우 - 임의 속도의 타자기 효과 구현 setTimeout(테이블 지연 시간)은 실행 시 로드 후 지연됩니다. 지정된 시간 이후에는

만 표현식을 한 번 실행합니다.

및 setInterval(테이블 상호 작용 시간)은 로드 후

지정된 시간마다 한 번씩 표현식을 실행합니다.

는 타이머 스레드에 의해 트리거됩니다

(단점: 높은 결합)

window.onload=function(){
    var twArr = [],//打字的数据库队列
        twing = false,//用于判断打字机的线程是否开启
        twID = [],//打字机线程ID
        twTime = 10,//用于定时调用的时间
        obj1 = document.getElementById("typeWriterEffect"),
        obj2 = document.getElementById("typeWriterEffect2"),
        twEffect = function(e,str){//添加显示的元素
            twArr.push({                "context":e,//目标元素上下文
                "str":str,//显示的元素
                "lening":0,//截取的进度
                "maxL":str.length//最大的进度
            })
        },
        closeTw = function(){//关闭定时调用
            clearTimeout(twID);//关闭线程
            twing = true;
        },
        twUi = function(){//定时调用
            var i = 0,
                L = twArr.length,
                eing = null;                for (var i = 0; i < L; i++) {
                    eing = twArr[i]//效果同时加载多对象数组
                    eing.lening++;                    if (eing.lening>eing.maxL) {//不设置关闭线程则打字效果循环
                        eing.lening = 0;
                    }
                    eing.context.innerHTML = eing.str.substring(0,eing.lening)+"_";
                }                var num = Math.floor(Math.random()*50+1);//1-50个随机数
                console.log(num);
                twID = setTimeout(twUi,num*twTime);//开启线程
                if(twID==eing.maxL){//到达最后关闭线程
                    closeTw();
                }
        },        //开启定时调用，参数为设置定时调用的时间
        startTw = function (twTime) {
            if (!twing) {//如果没有开启才开启
                twTime = twTime;
                twUi();//开始定时调用
            }
        };        //设置内容对象数组
        twEffect(obj1,"这就是打字机效果,打字速度随机哦！！！！！");        //开始调用线程
        startTw(twTime);
}

이벤트를 사용하여 스레드 실행

(단점: 다양한 이벤트를 바인딩하여 다양한 콜백 함수를 구현할 수 있습니다. 이 방법을 사용하면 너무 많아서 프로그램을 읽는 데 도움이 되지 않습니다)

setTimeout(function(){
    console.log(time is out);
}，50）;

Random number

Math.random()은 0~1개의 난수를 사용합니다.

유사한 확장 예:

Math.random()*10은 0~10개의 난수를 사용합니다(많은 소수점 포함) setTimeout和setinterval 的区别：
setTimeout(表延时时间)在执行时,是在载入后延迟指定时间后只去执行一次表达式,
而setInterval(表交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式

利用定时器触发线程

（缺点：耦合度高）

function f1(callback){setTimeout(function(){
    // f1 的代码
    callback();
},0);
}
f1(f2);

利用事件触发线程

（缺点：可以通过绑定不同的事件，实现不同的回调函数，如果应用这种方法过多，不利于阅读程序）

$f1.on(&#39;custom&#39;,f2);  //这里绑定事件以jQuery写法为例function f1(){setTimeout(function(){
    // f1的代码
    $f1.trigger(&#39;custom&#39;);
},0);
}

随机数

Math.random()取0-1随机数
同理拓展例子：
Math.random()*10取0-10随机数（包括一大堆小数点）
Math.random()*10+1取1-10随机数
Math.random()*10+2取2-10随机数
Math.random()*899+100取100-999随机数
其中常用：Math.floor(）Math.random ()*10+1은 1-10개의 난수를 사용합니다

Math.random()*10+2는 2-10개의 난수를 사용합니다

Math.random()*899+ 100은 100-999개의 난수를 사용합니다

일반적으로 사용되는: Math.floor() 난수의 정수 부분만 취합니다