JavaScript中setInterval仅执行一次：HTML实时显示当前时间失效

我懂你的困惑！你这段代码只执行一次的核心问题出在setInterval的调用方式上，和其他语言的逻辑确实不一样，我给你拆解一下：

问题根源 #

JavaScript的setInterval第一个参数需要接收一个函数引用（也就是告诉它“每隔一段时间要执行哪个函数”），但你现在写的是setInterval(updateClock($('#clock')) , 1000 )——这里你直接执行了updateClock($('#clock'))，相当于把这个函数执行后的返回值（你的函数没有return，所以是undefined）传给了setInterval。所以它只会在初始化时执行一次updateClock，之后就没有可执行的内容了。

修正方案 #

这里有两种常用的解决办法：

方法1：用匿名函数包裹调用

把updateClock的调用放在一个匿名函数里，这样setInterval拿到的是一个可执行的函数对象，每隔1秒就会执行这个匿名函数，进而调用updateClock：

$(document).ready(function () {
  function updateClock(ele){
    var current_time = new Date();
    var current_time_str = current_time.toLocaleTimeString();
    ele.text(current_time_str);
    console.log(current_time_str);
  }
  // 用匿名函数包裹，确保每次触发都执行updateClock
  setInterval(function() {
    updateClock($('#clock'));
  }, 1000 );
})

方法2：用bind绑定参数

利用函数的bind方法，把$('#clock')作为参数绑定到updateClock上，返回一个新的函数传给setInterval：

$(document).ready(function () {
  function updateClock(ele){
    var current_time = new Date();
    var current_time_str = current_time.toLocaleTimeString();
    ele.text(current_time_str);
    console.log(current_time_str);
  }
  // bind绑定参数，生成新的函数供setInterval调用
  setInterval(updateClock.bind(null, $('#clock')), 1000 );
})

为什么和其他语言不同？ #

像C、Objective-C或者Python这类语言，部分定时任务API会允许你直接指定“要执行的函数”+“对应的参数”，但JavaScript的setInterval设计上要求第一个参数必须是一个可执行的函数体/引用，不能直接传带参数的函数调用结果。这是JS异步API的典型特性，习惯了就好啦～

内容的提问来源于stack exchange，提问作者jett chen