2. 程式人生 > >【Javascript學習筆記】【js執行緒實戰— —實現隨機速度的打字機效果】

【Javascript學習筆記】【js執行緒實戰— —實現隨機速度的打字機效果】

阿新 • • 發佈：2019-01-27

目錄

隨機速度的打字機效果

效果

這裡寫圖片描述

程式碼

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部分

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);
}

引用到的知識點

執行緒

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('custom',f2);  //這裡繫結事件以jQuery寫法為例
function f1(){
setTimeout(function(){
    // f1的程式碼
    $f1.trigger('custom');
},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(）只取隨機數整數部分

實戰程式碼Download

快捷連結

相關推薦

【Javascript學習筆記】【js執行緒實戰— —實現隨機速度的打字機效果】

目錄 隨機速度的打字機效果 效果 程式碼 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

【JavaScript學習筆記】1：js的書寫,顯示資料,變數,函式

JavaScript描述的是網頁的行為，可以直接改變HTML而改變網頁的內容，或者提供和使用者的互動。 js寫在哪裡 ①直接寫入HTML JavaScript可以寫在HTML的script雙標籤裡，一般把這個雙標籤放在HEAD頭裡： <

【JavaScript學習筆記】if使用

document asc cnblogs class body 學習筆記 lang div var <html> <body> <script language="JavaScript">

【JavaScript學習筆記】鼠標樣式

右箭頭 javascrip script mov wait bsp cursor and ossh style="cursor:hand" 手形 style="cursor:crosshair" 十字形 style="cursor:text" 文本

【JavaScript學習筆記】調用google搜索

alt href blog ddl ear input arch -c html <html> <form method=get action="http://www.google.com/search"> <a

【JavaScript學習筆記】畫圖

ctype net ner cli onmouseup move con cursor bsp <!DOCTYPE HTML> <html> <head> <script type="text/ja

【JavaScript學習筆記】hello world

div color html pre 學習筆記 bsp body pan class <html> <body> <script language="JavaScript"> al

【JavaScript學習筆記】點擊消失

hid his script click fun bsp logs document query <!DOCTYPE html> <html> <head> <script type="text/j

【Javascript學習筆記】【DOM實戰— —jQ實現點選任意位置關閉某處的效果（常用於模態框後面的遮罩層）】

【Javascript學習筆記】 目錄 目錄 原理 效果 程式碼 實戰程式碼 快捷連結 點選任意位置關閉某處 而且點選對應處並不會hide掉自己 原理

JavaScript學習筆記——函式、立即執行函式、作用域、預編譯—day two

目錄 函式 定義 組成形式 遞迴 立即執行函式 作用域 變數作用域 函式作用域[[scope]] 作用域鏈 預編譯 JS執行分三步： 預編譯執行分五步： 函式 原則：高內聚弱耦合（重複） 定義    

【Dr.Chen的系列問題】Java多執行緒的實現操作

一、什麼是多執行緒？ 多執行緒（英語：multithreading），是指從軟體或者硬體上實現多個執行緒併發執行的技術。具有多執行緒能力的計算機因有硬體支援而能夠在同一時間執行多於一個執行緒，進而提升整體處理效能。具有這種能力的系統包括對稱多處理機、多核心處理器以及晶片級多

【Java程式設計】Java多執行緒的實現

多執行緒 程式：是一個指令的集合。 程序：正在執行中的程式，是一個靜態的概念。 執行緒：是程序中的一個單一的連續控制流程，執行緒又本稱為輕量級程序。 一個程序可擁有多個並行的執行緒，一個程序中的執行緒共享相同的記憶體單元，記憶體地址空間，可以訪問相同的變數和物件，而且他們從

RTthread學習筆記————第4章 執行緒管理

什麼是執行緒 執行緒，有時被稱為輕量級程序(Lightweight Process，LWP），是程式執行流的最小單元。一個標準的執行緒由執行緒ID，當前指令指標(PC），暫存器集合和堆疊組成。 RT-Thread 的執行緒排程器是搶佔式的，主要的工作

《自己動手寫java虛擬機器》學習筆記（七）-----執行緒私有執行時資料區（go）

     專案地址：https://github.com/gongxianshengjiadexiaohuihui      在執行java程式時，Java虛擬機器需要使用記憶體來存放各種各樣的資料，Java虛擬機器規範把這些記憶體的區

CUDA學習筆記（2）- 執行緒並行和塊並行

1. 獲取顯示卡裝置資訊 有些顯示卡支援CUDA有些不支援，那麼如何確定主機的顯示卡裝置是否支援CUDA呢。可以使用下面的函式獲取顯示卡的相關資訊。 cudaError_t cudaGetDeviceCount(int *count) 獲取支援CUD

C#學習筆記（11）- 執行緒類與程序類

為什麼要使用多執行緒？ 讓計算機“同時”做多件事情，節約時間 多執行緒可以讓一個程式“同時”處理多個事情 後臺執行程式，提高程式的執行效率，也不會使主介面出現無響應的情況 獲得當前執行緒與當前程序 前臺執行緒與後臺執行緒 前臺執行緒：只有所

《Android開發藝術探索》學習筆記之Android的執行緒和執行緒池

一、概述 1、主執行緒與子執行緒 主執行緒 又叫UI執行緒 主要作用是執行四大元件以及處理它們和使用者的互動，主要用來處理和介面相關的事情 子執行緒 執行耗時任務，比如網路請求、I/O操作等

Java學習筆記(一) Java多執行緒 synchronized同步方法

1.提出問題-例項變數非執行緒安全 如果多個執行緒同時訪問1個物件的例項變數,則可能出現"非執行緒安全"問題。 1.1 何為非執行緒安全？ 我的理解是多個執行緒對一個例項變數操作會出現值被更改,不同步的情況。 1.2 舉例 1.2.1 有私有變數的類HasPr

Java學習筆記(二) Java多執行緒 synchronized同步方法-防止髒讀

1. 髒讀 在給一個物件賦值的時候進行了同步, 但是在取值的時候可能出現意外,此值已經被其他執行緒修改了,這種情況就是髒讀 1.1 PublicVar類 public class PublicVar { public String userName =

java學習筆記(四) java多執行緒-使用ReentrantLock實現同步

1. 使用ReentrantLock 在JDK1.5中新增的ReentrantLock類在擴充套件功能上比synchronized更加強大，比如具有嗅探鎖定、多路分支通知等功能,使用比synchronized更加靈活。 1.1 使用ReentrantLock實