iT邦幫忙

2021 iThome 鐵人賽

DAY 23
1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 23

JS 23 - 非同步執行,也是要依序排隊!

  • 分享至 

  • xImage
  •  

大家好!

今天我們要實作的靜態函式有點像 Promise 的感覺。
我們進入今天的主題吧!


程式碼

Felix.queue = function (fns, data) {
    if (!Felix.isArrayLike(fns)) return;
    var i = 0;
    var next = function (data) {
        var fn = fns[i++];
        return fn === fns[fns.length - 1] ? fn(data) : fn(next, data);
    };
    next(data);
};

實測

Felix.queue([
    function (next) {
        console.log(0);
        setTimeout(next, 1000);
    },
    function (next) {
        console.log(1);
        window.addEventListener('click', function listener(e) {
            e.currentTarget.removeEventListener(e.type, listener);
            return next(e);
        });
    },
    function (data) {
        console.log(`You clicked the ${data.target.tagName}.`);
    }
]);

// Log: 0
/* 一秒後 */
// Log: 1
/* 點擊後 */
// Log: You clicked the BODY.

執行到第一個函式時,不管點擊幾次都不會觸發事件,因為監聽器要等到第二個函式執行時才會被建立。


差不多也到尾聲了,接下來我們要介紹的是函式庫的靜態方法。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 22 - 探險時間!深入查詢物件的所有子屬性!
下一篇
JS 24 - 請求支援前,要先發送請求!
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言