How to solve the invalid problem of electron's setInterval?

Question

I encountered a difficult problem when trying to write an electron application. The following is a detailed description of the problem: I plan to load a clock on the page of the electron rendering process. Just like our system time, it will refresh every second, 60 seconds is one minute, and so on, but I don’t use the system time, I use a current Time API, the json data returned by this API interface is the current time. I wrote a set of asynchronous execution functions in the main process main.js to get the data passed by this API. The following is the main process main.js Asynchronous get time API code:

const request = net.request('http://api.k780.com:88/?app=life.time&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json')

  request.on('response', (response) => {
    console.log(response.statusCode);
    console.log(response.headers);

    response.on('data', (chunk) => {
      let result = JSON.parse(chunk).result;
      let datetime = result.datetime_1;
      let week = result.week_4;
      console.log(datetime, week)
      mainWindow.webContents.send('datetime', { datetime, week });
    })

    response.on('end', () => {
      console.log('end');

    })

  })
  request.end();

The console information displayed by the main process is as follows:

200
{
  server: 'nginx',
  date: 'Thu, 06 May 2021 01:38:00 GMT',
  'content-type': 'application/json; charset=utf-8;',
  'transfer-encoding': 'chunked',
  connection: 'keep-alive',
  'access-control-allow-origin': '*'
}
2021-05-06 09:38:01 Thursday
end

Then after requesting this API, it will respond with a timestamp of the current time. After the main process obtains this timestamp, it will be sent to my rendering process through webContents.send. The following is the code sent by the main process to the rendering process:

mainWindow.webContents.send('datetime', { datetime, week });

The rendering process obtains the time data sent by the main process through ipcRenderer.on, and then formats this timestamp and outputs it to my rendering process page. I wrote this set of code as a function as follows:

function getNetTime() {
    //Get the date and time passed by the main process
        ipcRenderer.on('datetime', (event, arg) => {
            let datetime = arg.datetime; //Get date and time
            let week = arg.week; //Get the day of the week
            let year = datetime.substring(0, 4); //Get year
            let month = datetime.substring(5, 7); //Get month
            let day = datetime.substring(8, 10); //Get the day
            let hour = datetime.substring(10, 13); //Get hour
            let min = datetime.substring(14, 16); //Get minutes
            let sec = datetime.substring(17, 19); //Get seconds
            let weekday = ""; //Get Chinese weekday
            const timeText = document.querySelector('#timeText')
            // console.log(datetime);
            // console.log(week);
            // console.log(year,month,day,hour,min);
            switch (week) {
                case'Monday':
                    weekday ='Monday';
                    break;
                case'Tuesday':
                    weekday ='Tuesday';
                    break;
                case'Wednesday':
                    weekday ='Wednesday';
                    break;
                case'Thursday':
                    weekday ='Thursday';
                    break;
                case'Friday':
                    weekday ='Friday';
                    break;
                case'Saturday':
                    weekday ='Saturday';
                    break;
                case'Sunday':
                    weekday ='Sunday';
                    break;
            }
            timeText.innerHTML =`${year}year${month}month${day}day ${weekday}${hour}:${min}:${sec}`;

        });

The problem now encountered is that although the current time can be displayed normally on the page of the rendering process, it cannot be automatically refreshed. I want to set it to refresh every 1000 milliseconds through setTimeout or setInterval, which is equivalent to one step in 1 second of the clock. But it has no effect. The current time can only be displayed when the program is reopened, and it cannot be automatically refreshed. The following is the code of setInterval:

window.onload = () => {
    getNetTime();
    setInterval(getNetTime(),1000)
    
}

The above is the problem I am encountering now. Electron is also just getting in touch. I am searching for a long time on net. But no use. Please help or try to give some ideas how to achieve this.

Answer 1

The problem you're experiencing has nothing to do with Electron or how you request the data from the API. It's about how you set your interval.

The setInterval() function requires a function or a string of code as a parameter. However, you are specifying getNetTime() as the code it should call. This is not a function. It is a function call and will be evaluated before setInterval() is called. This will not do anything because the return type of getNetTime() is undefined.

To mitigate this, you can use a function, an arrow function or just leave out the parentheses. Whatever you choose is up to your liking.

setInterval (getNetTime, 1000);
// or
setInterval (() => getNetTime (), 1000);
// or
setInterval (function () { getNetTime (); }, 1000);