类中调用间隔时的错误回调

Question

我正在尝试在我的 js 类中创建间隔，代码如下所示：class Clock {constructor(template) {   this.template = template;  this.timer = this.timer;  this.date = new Date(); // call date}render = () => {  let hours = this.date.getHours(); // get hours  if (hours < 10) hours = '0' + hours;  let minutes = this.date.getMinutes(); // get minutes  if (minutes < 10) minutes = '0' + minutes;  let seconds = this.date.getSeconds(); // get seconds  if (seconds < 10) seconds = '0' + seconds;  let output = hours + ':' + minutes + ':' + seconds;   return output; // output}stop = () => { // stop interval  clearInterval(this.timer);}start = () => { // start interval  this.timer = setInterval(this.render(), 1000);}}var clock = new Clock({template: ''});clock.start();我有这样的错误：TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received '06:16:49'at setInterval (timers.js:166:3)at Clock.start (/home/runner/Training/index.js:28:20)at /home/runner/Training/index.js:33:7at Script.runInContext (vm.js:130:18)at Object.<anonymous> (/run_dir/interp.js:209:20)at Module._compile (internal/modules/cjs/loader.js:1137:30)at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)at Module.load (internal/modules/cjs/loader.js:985:32)at Function.Module._load (internal/modules/cjs/loader.js:878:14)at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)我认为问题是当我打电话this.timer = setInterval(this.render(), 1000);但是当我更改为错误this.timer = setInterval(this.render, 1000);时会显示这样javascript。所以任何人都可以帮助我。谢谢。

Answer 1

您的代码存在一些问题，但请尝试以下操作：

class Clock {

  constructor(template) {

    this.template = template;

    this.date = new Date(); // call date

  }

  render() {

    let hours = this.date.getHours(); // get hours

    if (hours < 10) hours = "0" + hours;

    let minutes = this.date.getMinutes(); // get minutes

    if (minutes < 10) minutes = "0" + minutes;

    let seconds = this.date.getSeconds(); // get seconds

    if (seconds < 10) seconds = "0" + seconds;

    let output = hours + ":" + minutes + ":" + seconds;

    return output; // output

  }

  stop() {

    // stop interval

    clearInterval(this.timer);

  }

  start() {

    // start interval

    this.timer = setInterval(() => this.render(), 1000);

  }

}

const clock = new Clock("");

clock.start();

您的构造函数设置不正确（但也未使用）并且您的this引用已关闭。

实时示例： https ://codesandbox.io/s/clock-test-1r8dm?file=/src/index.js

根据 OP 的评论，OP 可能要求增加时间。如果是这样，请将渲染替换为

  render() {

    const nD = new Date();

    let hours = nD.getHours(); // get hours

    if (hours < 10) hours = "0" + hours;

    let minutes = nD.getMinutes(); // get minutes

    if (minutes < 10) minutes = "0" + minutes;

    let seconds = nD.getSeconds(); // get seconds

    if (seconds < 10) seconds = "0" + seconds;

    let output = hours + ":" + minutes + ":" + seconds;

    return output; // output

  }

Answer 2

setInterval 接受函数的名称

class Clock {

  constructor(template) {

    this.template = template;

    this.timer = this.timer;

    this.date = new Date();

  }

  render = () =>  {

    let time = this.date;

    let hours = time.getHours();

    if (hours < 10) hours = "0" + hours;

    let minutes = time.getMinutes();

    if (minutes < 10) minutes = "0" + minutes;

    let seconds = time.getSeconds();

    if (seconds < 10) seconds = "0" + seconds;

    let output = hours + ":" + minutes + ":" + seconds;

    console.log(output);

  }

  stop = () => {

    clearInterval(this.timer);

  }

  start =() => {

    this.timer = setInterval(this.render, 1000);

  }

}

var clock = new Clock({ template: "" });

clock.start();

Answer 3

setInterval需要一个回调函数。你不应该执行它。

start =() => {

     this.timer = setInterval(() => this.render(), 1000);

   }

class Clock {

  constructor(template) {

    this.template = template;

    this.timer = this.timer;

   // this.date = new Date(); // call date

  }

  render = () => {

    const date = new Date();

    let hours = date.getHours(); // get hours

    if (hours < 10) hours = '0' + hours;

    let minutes = date.getMinutes(); // get minutes

    if (minutes < 10) minutes = '0' + minutes;

    let seconds = date.getSeconds(); // get seconds

    if (seconds < 10) seconds = '0' + seconds;

    let output = hours + ':' + minutes + ':' + seconds;

    console.log(output)

    return output; // output

  }

  stop = () => { // stop interval

    clearInterval(this.timer);

  }

  start = () => { // start interval

    this.timer = setInterval(this.render, 1000);

  }

}

var clock = new Clock({ template: '' });

clock.start();

Answer 4

setInterval 创建了一个新范围，所以this在 setInterval 内部不是同一个类实例，所以this.date.getHours()会抛出错误，因为this.datewill undefined。