Javascript setTimeout / clearTimeout在电子中的怪异行为

Posted 2021-04-10

我正在构建和电子应用程序加载页面并在页面加载后在页面上进行一些测试。我想在页面加载时强制执行超时，所以让我们说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会在我发出执行测试的请求之前删除超时功能，因此done test urla应该永远不会发生在urla timed out输出之后。这是怎么回事？

答案

您的计时器变量未定义。

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