javascript - 如何在给定的时间间隔重复具有相同参数的函数(目前正在尝试使用 setTimout)

Question

我有一个获取数字时间的非常基本的函数，想知道是否可以将“elementToChange”设为参数。当我尝试这样做时，它卡在了 setTimout 函数上，因为它不采用相同的参数。

有没有什么方法可以更改代码，以便我可以简单地将要更改的元素作为参数提供，并且仍然在给定的时间间隔内重复该函数？

function setDigitalTime(){
  let today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  if(m < 10){m = "0" + m;}
  if(s < 10){s = "0" + s;}
  document.getElementById("elementToChange").innerHTML = h+" : "+m+" : "+s;
  setTimeout(setDigitalTime,500);
} 

Answer 1

setTimeout 在第一个和第二个之后的附加参数是调用回调函数的参数。例如 setTimeout((arg) => console.log(arg), 500, 'foo') 将在 500 毫秒后打印 foo。因此，一种选择是使用传递给 setDigitalTime 的参数作为 setTimeout 的第三个参数:

function setDigitalTime(id){
  let today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  if(m < 10){m = "0" + m;}
  if(s < 10){s = "0" + s;}
  document.getElementById(id).innerHTML = h+" : "+m+" : "+s;
  setTimeout(setDigitalTime, 500, id);
} 

对于其他参数，您可以遵循相同的模式 - 传递给 setTimeout 的第四个参数表示用于调用回调函数的第二个参数，依此类推。

另一种选择是使用一个调用 setDigitalTime(id) 的匿名内联函数:

function setDigitalTime(id){
  let today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  if(m < 10){m = "0" + m;}
  if(s < 10){s = "0" + s;}
  document.getElementById(id).innerHTML = h+" : "+m+" : "+s;
  setTimeout(() => setDigitalTime(id), 500);
}