如何在给定的时间间隔重复具有相同参数的函数（目前正在尝试使用 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);
}

Answer 2

  function setDigitalTime(setElement){
    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(setElement).innerHTML = h+" : "+m+" : "+s;

  } 

  // Change to call onload.
  (function(){
    setInterval(() => { setDigitalTime('elementToChange') },500);
  })();

<div id="elementToChange"></div>

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

How to repeat a function with the same parameters at a given time interval (currently trying to use setTimout)

javascript

html

timing