Javascript setTimeout / clearTimeout在電子中的怪異行為

Question

我正在構建和電子應用程序加載頁面並在頁面加載后在頁面上進行一些測試。 我想在頁面加載時強制執行超時，所以讓我們說5秒后如果頁面沒有加載，請轉到下一個項目。

在我的主要流程中，我的代碼是這樣的：

var timer;
var urls = [...];

var win = new BrowserWindow({...});
var myURL = "";

var setTimer = function (){
    timer = setTimeout(()=>{
        console.log(myURL + " timed out");
        loadNext();
    }, 5000);
}

var loadNext = function(){
    if (urls.length > 0){
        timer = setTimer();
        myURL = urls.pop();
        console.log(myURL);
        win.loadURL(myURL;
    }   
}

win.webContent.on('did-finish-load', () => {
    clearTimeout(timer);
    browserWindow.webContents.send('doTest');
})

ipcMain.on('testResult', (event, data) => {
    console.log('done test ' + data);
    event.returnValue = 'yay';
})

在我的渲染過程中，有一個監聽器會監聽'doTest'並同步發回消息。

在大多數情況下，這段代碼工作：當頁面在5s后沒有完成加載時，它移動到下一個URL並輸出正確的消息，如下所示：

url1
url1 timed out
url2 
done test url2
url3
url3 timed out 
...

但是，偶爾會給出如下輸出：

urla
urla timed out
urlb
done test urla
done test urlb
urlc
done test urlc

我預計clearTimeout會在我發出執行測試的請求之前刪除超時功能，所以在urla timed out輸出后應該永遠不會發生done test urla 。 這是怎么回事？

Answer 1

您的計時器變量未定義。

var timer;
    var urls = [...];

    var win = new BrowserWindow({...});
    var myURL = "";

    var setTimer = function (){
        //Missing return statement
        timer = setTimeout(()=>{
            console.log(myURL + " timed out");
            loadNext();
        }, 5000);
    }

    var loadNext = function(){
        if (urls.length > 0){
            //Following line sets timer to undefined:
            //timer = setTimer(); (comment it out)
            //change to:
            setTimer();
            myURL = urls.pop();
            console.log(myURL);
            win.loadURL(myURL; //Also don't forget to fix this)
        }   
    }

    win.webContent.on('did-finish-load', () => {
        clearTimeout(timer);
        browserWindow.webContents.send('doTest');
    })

    ipcMain.on('testResult', (event, data) => {
        console.log('done test ' + data);
        event.returnValue = 'yay';
    })