首頁 > 文章 > web前端 > js執行緒的案例— —實現隨機速度的打字機效果

js執行緒的案例— —實現隨機速度的打字機效果

php是最好的语言原創: 2018-08-02 09:29:251370瀏覽

#目錄
隨機速度的打字機效果

效果

##引用到的知識點
利用定時器觸發線程
#利用事件觸發線程

快速連結

js執行緒的案例— —實現隨機速度的打字機效果

##隨機速度的打字機效果

效果

程式碼

html部分

<!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>

js部分<pre class="brush:js;toolbar:false;">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); }</pre>引用到的知識點
線程js的單一線程（single threaded）和非同步（asynchronous）的，但並不互相矛盾，js的宿主環境（例如瀏覽器，Node）是多執行緒的，宿主環境透過某種方式使得js具備了非同步的屬性。

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

有的人就會問到定時器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(）

只取隨機數整數部分

JS實作的打字機效果完整實例

JS實作的打字機效果範例程式碼#########相關影片：##########實作全螢幕切換效果實戰影片教學#######

以上是js執行緒的案例— —實現隨機速度的打字機效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html math 回调函数堆线程多线程 JS 事件异步

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：【JavaScript】兩個截然相反的事件流：事件冒泡與事件捕獲下一篇：【JavaScript】兩個截然相反的事件流：事件冒泡與事件捕獲

看更多