无法调用模板文字中的函数

Question

我有一个业余问题，为什么我不能在模板文字中调用这个函数。代码返回未定义，控制台中没有任何错误。我似乎看不出我做错了什么，我是否缺少返回声明？function startCountdown(seconds) {  let counter = seconds;  const interval = setInterval(() => {    console.log(counter);    counter--;    if (counter < 0) {      clearInterval(interval);    }  }, 1000);}document.body.innerHTML = `<p>Quick! Click to stop the page from self destructing. You have ${startCountdown(  5)} seconds.</p>`;

Answer 1

当您不从函数返回任何内容时，隐式undefined返回。因此你会得到You have undefined seconds.</p>

你必须从你的函数中返回一个值。

即使你从你的函数返回一个值，你也会得到你作为参数传递的相同值，因为setInterval本质上是异步的，这意味着在时间间隔开始和结束时你的函数已经返回了该值。

function startCountdown(seconds) {

  let counter = seconds;

  const interval = setInterval(() => {

    console.log(counter);

    counter--;

    if (counter < 0) {

      clearInterval(interval);

    }

  }, 1000);

return counter;

}

You have 5 seconds.</p>如果你5作为参数传递给你的函数，你会得到。

Answer 2

看看这段代码：

function startCountdown(seconds) {

    let counter = seconds;

    const interval = setInterval(() => {

        console.log(counter); 

        document.querySelector('#countdown').innerHTML = counter;

        counter--;

        if (counter < 0) {

            clearInterval(interval);

        }

    }, 1000);

}

document.body.innerHTML = `<p>Quick! Click to stop the page from self destructing. You have <span id="countdown">5</span> seconds.</p>`;

startCountdown(5);

它有一个带有id. 您可以使用 JS 更新此元素。

Answer 3

您可以提供一个回调，作为回报提供秒数：

function startCountdown(sec, cb) {

  const itv = setInterval(() => {

    cb(sec); // Call your Callback, pass sec as argument.

    sec--;

    if (sec < 0) clearInterval(itv);

  }, 1000);

}

// Use your function:

startCountdown(5, (sec) => {

  document.body.innerHTML = `<p>Quick! Click to stop the page from self destructing. You have ${sec} seconds.</p>`;

});

这样你就可以重用你的startCountdown()代码而不用硬编码到它不相关的东西中。