如何将jQuery countdown函数的返回值输出渲染到#my_div元素中

问题根因 #

原有代码无法渲染到页面有两个核心原因：

• setInterval回调函数里写的return value完全无效，这个返回值没有任何接收方，不会传递到插件外层
• 没有提前保存目标元素的引用，定时器回调内的this默认指向window，根本拿不到#my_div元素

修复方案 #

直接修改插件逻辑，提前缓存目标元素，在定时器执行时直接把计算好的值写入元素即可，完整可运行代码如下：

$.fn.countdown = function(toTime){
  // 提前缓存调用插件的目标元素，避开定时器内this指向偏移问题
  const $el = this;
  const timer = setInterval(function(){
    const now = new Date().getTime();
    const distance = toTime - now;

    // 倒计时结束后清除定时器，避免无效空跑
    if (distance < 0) {
      clearInterval(timer);
      $el.text('倒计时已结束');
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    const value = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
    // 直接将倒计时值写入目标元素
    $el.text(value);
  }, 1000);
};

// 插件调用方式和原有写法完全一致
$('#my_div').countdown(new Date("Jan 5, 2024 15:37:25").getTime());

对应的HTML结构：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my_div"></div>

补充说明 #

• jQuery插件方法内的this本身就是jQuery对象，不需要额外再用$()包裹一层
• 如果需要给倒计时加自定义样式（比如给天/时/分/秒单独包标签改颜色），把.text()替换成.html()，传入拼接好的HTML字符串即可
• 定时器的时间间隔设为1000时，首次渲染会有1秒延迟，如果要打开页面立刻显示倒计时，可以把定时器里的计算逻辑抽成独立函数，插件初始化时先手动调用一次

内容的提问来源于stack exchange，提问作者HiDayurie Dave