Javascript setTimeout/clearTimeout 在 Electron 中的奇怪行为

Question

我正在构建一个 Electron 应用程序，该应用程序加载页面并在加载页面后在页面上进行一些测试。我想在页面加载时强制执行超时，所以假设 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”并将同步发回消息。

在大多数情况下，此代码有效:当页面在 5 秒后未完成加载时，它会移至下一个 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 会在发送测试请求之前删除超时功能，因此 done test urla 永远不会在 urla timed 之后发生out 输出。这是怎么回事？

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