Javascript是單線程的，還會(huì)出現(xiàn)數(shù)據(jù)競(jìng)爭(zhēng)嗎？當(dāng)然會(huì)！

Awbeci 發(fā)布于2019-08-22 18:04 / 2058人閱讀

摘要：考慮如下代碼如果用戶在和之間再次點(diǎn)擊的話，就有可能同時(shí)發(fā)出兩個(gè)。這是個(gè)很合理的需求，所以我特意在上提問(wèn)，可惜看起來(lái)并沒(méi)有現(xiàn)成的輪子可以用。用下面的函數(shù)包裹原函數(shù)，如果前一次請(qǐng)求尚未結(jié)束，新請(qǐng)求會(huì)排隊(duì)。示例使用以上所有代碼按授權(quán)。

考慮如下代碼

whatever.onclick = async () => {
    const a = await(await fetch("step-1")).text();
    const b = await(await fetch("step-2")).text();
    whatever.textContent = a + b;
}

如果用戶在step-1和step-2之間再次點(diǎn)擊的話，就有可能同時(shí)發(fā)出兩個(gè)step-1。

當(dāng)然，服務(wù)器可以驗(yàn)證之后通通拒掉，但是用戶體驗(yàn)很差。這是個(gè)很合理的需求，所以我特意在SF上提問(wèn)，可惜看起來(lái)并沒(méi)有現(xiàn)成的輪子可以用。

所以還是只能自己造。

用下面的函數(shù)包裹原函數(shù)，如果前一次請(qǐng)求尚未結(jié)束，新請(qǐng)求會(huì)和舊請(qǐng)求一起返回。

/**
 * Creates a function that invokes `originalFunction`, with the `this` binding
 * and `arguments` of the created function, while there is no other pending 
 * excutions of `originalFunction`. Simultaneous calls to the created function
 * return the result of the first pending `originalFunction` invocation.
 * 
 * @param {function} originalFunction async function to wrap
 */
const debounceAsync = originalFunction => {
    let currentExcution = null;
    const wrappedFunction = async function () {
        // 1. locked => return lock
        if (currentExcution) return currentExcution;

        // 2. released => apply
        currentExcution = originalFunction.apply(this, arguments);
        try {
            return await currentExcution;
        }
        finally {
            currentExcution = null;
        }
    };
    return wrappedFunction;
};

用下面的函數(shù)包裹原函數(shù)，如果前一次請(qǐng)求尚未結(jié)束，新請(qǐng)求會(huì)排隊(duì)。

const endOfQueue = Promise.resolve();
const overrideResult = async lastExcution => {
    try {
        await lastExcution;
    }
    finally {
        return endOfQueue;
    }
}

/**
 * Creates a function that invokes `originalFunction`, with the `this` binding
 * and `arguments` of the created function, while there is no other pending 
 * excutions of `originalFunction`. Simultaneous calls to the created function
 * will be queued up.
 * 
 * @param {function} originalFunction async function to wrap
 */
const queueAsync = originalFunction => {
    let lastExcution = endOfQueue;
    const wrappedFunction = async function () {
        // 1. queue up
        const myExcution = lastExcution.then(() => originalFunction.apply(this, arguments));

        // 2. update queue tail + swipe excution result from queue
        lastExcution = overrideResult(myExcution);

        // 3. return excution result
        return myExcution;
    };
    return wrappedFunction;
}

示例使用

/**
 * A promisified settimeout
 * 
 * @param {number} [ms=0] time to sleep in ms
 */
const sleep = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));

const debounceAsync_UNIT_TEST = async () => {
    const goodnight = debounceAsync(sleep);
    for (let i = 0; i < 8; i++) {
        goodnight(5000).then(() => console.log(Date()));
        await sleep(500);
    }
    console.warn("Expected output: 8 identical datetime");
};

const queueAsync_UNIT_TEST = () => {
    const badnight = queueAsync(i => sleep(i).then(() => { if (Math.random() > 0.5) throw new Error("uncaught error test: you should expect a console error message.") }));
    badnight(1000);
    badnight(1000);
    badnight(1000);
    badnight(1000);
    badnight(1000).finally(() => console.log("5s!"));
    badnight(1000);
    badnight(1000);
    badnight(1000);
    badnight(1000);
    badnight(1000).finally(() => console.log("10s!"));
    console.warn("Check message timestamps.");
    console.warn("Bad:");
    console.warn("1 1 1 1 1:5s");
    console.warn(" 1 1 1 1 1:10s");
    console.warn("Good:");
    console.warn("1 1 1 1 1:5s");
    console.warn("         1 1 1 1 1:10s");
}

以上所有代碼按Mozilla Public License, v. 2.0授權(quán)。
以上所有文字內(nèi)容按CC BY-NC-ND 4.0授權(quán)。

GPU云服務(wù)器云服務(wù)器阿里云注銷(xiāo)服務(wù)器還會(huì)有數(shù)據(jù)嗎車(chē)朕網(wǎng)大數(shù)據(jù)平臺(tái)會(huì)不會(huì)出現(xiàn)問(wèn)題服務(wù)器的數(shù)據(jù)會(huì)云存儲(chǔ)嗎貸款買(mǎi)車(chē)會(huì)出現(xiàn)vps服務(wù)費(fèi)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95456.html