簡介

閉包就是能夠讀取其他函數(shù)內部變量的函數(shù)。例如在javascript中，只有函數(shù)內部的子函數(shù)才能讀取局部變量，所以閉包可以理解成“定義在一個函數(shù)內部的函數(shù)“。在本質上，閉包是將函數(shù)內部和函數(shù)外部連接起來的橋梁。摘自百度百科。

應用

有些時候我們往往會使用全局變量來作為計數(shù)容器，這是一個不好的習慣。原因如下：

我們可以使用閉包來代替使用全局變量，具體使用見下邊：

比如我們需要實現(xiàn)一個打字機效果，第一次調用的時候正向播放文本，第二次調用的時候逆向播放文本。我們需要使用到一個標志位用于切換兩種效果。

首先是實現(xiàn)正、逆切換，函數(shù)cut()：

<script>let myflag = true;//此時是一個全局變量function cut() {if (myflag) {for (let i = 1; i <= str.length; i++) { //正放setTimeout(function() { //定時器word.innerHTML = str.substr(0, i);}, (i - 1) * time);}} else {for (let j = str.length; j >= 0; j--) { //倒放setTimeout(function() { //定時器word.innerHTML = str.substr(0, j);}, (str.length - j) * time);}}myflag = !myflag;} </script>

實現(xiàn)閉包：

我們將該函數(shù)封裝在另一個函數(shù)play()中，調用play就返回函數(shù)cut()。

<script>function play() {let myflag = true;//此時是一個局部變量function cut() {if (myflag) {for (let i = 1; i <= str.length; i++) { //正放setTimeout(function() { //定時器word.innerHTML = str.substr(0, i);}, (i - 1) * time);}} else {for (let j = str.length; j >= 0; j--) { //倒放setTimeout(function() { //定時器word.innerHTML = str.substr(0, j);}, (str.length - j) * time);}}myflag = !myflag;}return cut; //注意不要帶上括號} </script>

案例

完善打字機案例

使用閉包完善一下案例：打字機效果（文本一個一個的顯示，同時有光標閃爍效果）。

• 再將函數(shù)play()封裝在一個函數(shù)show()中。調用show()函數(shù)會播放打字機動畫，且返回動畫所用時間。
• 函數(shù)play()后邊添加調用（執(zhí)行）play()的部分，根據(jù)參數(shù)num設置播放次數(shù)。num：-1為正放一次，其他數(shù)字為正+逆。例如：-1，只正放一次。1，”正+逆“一次。2，”正+逆“兩次。

let playFn = play(); //獲取實現(xiàn)播放效果的函數(shù)for (let i = 0; i < num; i++) {setTimeout(function() {playFn();}, (str.length * time + timewait) * i);}

函數(shù)show()：

//封裝好的函數(shù) function show(word, str, num, time, timewait) { //num-1為正放一次，其他數(shù)字為正+逆。例如：-1，只正放一次。1，”正+逆“一次。2，”正+逆“兩次。//默認值if (num == null) {num = 1 * 2;} else {if (num == -1) { //只正放一次num = 1;} else {num *= 2;}}if (time == null) {time = 200; //每個字符顯示的時間}if (timewait == null) {timewait = 2000; //正倒放等待時間}//播放（返回一個函數(shù)，調用返回的函數(shù)執(zhí)行播放動作。多次調用，先正后逆。）function play() {let myflag = true;function cut() {if (myflag) {for (let i = 1; i <= str.length; i++) { //正放setTimeout(function() { //定時器word.innerHTML = str.substr(0, i);}, (i - 1) * time);}} else {for (let j = str.length; j >= 0; j--) { //倒放setTimeout(function() { //定時器word.innerHTML = str.substr(0, j);}, (str.length - j) * time);}}myflag = !myflag;}return cut; //注意不要帶上括號}let playFn = play(); //獲取實現(xiàn)播放效果的函數(shù)for (let i = 0; i < num; i++) {setTimeout(function() {playFn();}, (str.length * time + timewait) * i);}return (str.length * time + timewait) * num; }

播放多條文本

根據(jù)函數(shù)show()返回的動畫播放時間，使用嵌套的定時器即可實現(xiàn)播放多條文本的效果。

let word = document.querySelector('.word');//顯示文本的容器let str1 = "hello<br>world<br>!";//可以嵌入html代碼let str2 = "你好，我是輕率的保羅！";let str3 = "很高興見到你。";let str4 = "測試：我只正放一次！";let time_wait = 1000;//播放等待時間setTimeout(function() {time_wait = show(word, str1, 1); //播放第一句setTimeout(function() { //第二句time_wait = show(word, str2, 2);setTimeout(function() { //第三句time_wait = show(word, str3, 1);setTimeout(function() { //第四句show(word, str4, -1);//只正放一次}, time_wait);}, time_wait);}, time_wait);}, time_wait);

點擊這里查看效果：傳送門
打字機效果案例源碼：https://cloud.189.cn/t/MbYraiArERrq（訪問碼：hzj6）
原文鏈接：js閉包

總結

以上是生活随笔為你收集整理的js闭包-实现打字机动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。