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

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:7

at 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 {&nbsp; constructor(template) {&nbsp; &nbsp; this.template = template;&nbsp; &nbsp; this.date = new Date(); // call date&nbsp; }&nbsp; render() {&nbsp; &nbsp; let hours = this.date.getHours(); // get hours&nbsp; &nbsp; if (hours < 10) hours = "0" + hours;&nbsp; &nbsp; let minutes = this.date.getMinutes(); // get minutes&nbsp; &nbsp; if (minutes < 10) minutes = "0" + minutes;&nbsp; &nbsp; let seconds = this.date.getSeconds(); // get seconds&nbsp; &nbsp; if (seconds < 10) seconds = "0" + seconds;&nbsp; &nbsp; let output = hours + ":" + minutes + ":" + seconds;&nbsp; &nbsp; return output; // output&nbsp; }&nbsp; stop() {&nbsp; &nbsp; // stop interval&nbsp; &nbsp; clearInterval(this.timer);&nbsp; }&nbsp; start() {&nbsp; &nbsp; // start interval&nbsp; &nbsp; this.timer = setInterval(() => this.render(), 1000);&nbsp; }}const clock = new Clock("");clock.start();您的构造函数设置不正确（但也未使用）并且您的this引用已关闭。实时示例： https ://codesandbox.io/s/clock-test-1r8dm?file=/src/index.js根据 OP 的评论，OP 可能要求增加时间。如果是这样，请将渲染替换为&nbsp; render() {&nbsp; &nbsp; const nD = new Date();&nbsp; &nbsp; let hours = nD.getHours(); // get hours&nbsp; &nbsp; if (hours < 10) hours = "0" + hours;&nbsp; &nbsp; let minutes = nD.getMinutes(); // get minutes&nbsp; &nbsp; if (minutes < 10) minutes = "0" + minutes;&nbsp; &nbsp; let seconds = nD.getSeconds(); // get seconds&nbsp; &nbsp; if (seconds < 10) seconds = "0" + seconds;&nbsp; &nbsp; let output = hours + ":" + minutes + ":" + seconds;&nbsp; &nbsp; return output; // output&nbsp; }

Answer 2

setInterval 接受函数的名称class Clock {&nbsp; constructor(template) {&nbsp; &nbsp; this.template = template;&nbsp; &nbsp; this.timer = this.timer;&nbsp; &nbsp; this.date = new Date();&nbsp; }&nbsp; render = () =>&nbsp; {&nbsp; &nbsp; let time = this.date;&nbsp; &nbsp; let hours = time.getHours();&nbsp; &nbsp; if (hours < 10) hours = "0" + hours;&nbsp; &nbsp; let minutes = time.getMinutes();&nbsp; &nbsp; if (minutes < 10) minutes = "0" + minutes;&nbsp; &nbsp; let seconds = time.getSeconds();&nbsp; &nbsp; if (seconds < 10) seconds = "0" + seconds;&nbsp; &nbsp; let output = hours + ":" + minutes + ":" + seconds;&nbsp; &nbsp; console.log(output);&nbsp; }&nbsp; stop = () => {&nbsp; &nbsp; clearInterval(this.timer);&nbsp; }&nbsp; start =() => {&nbsp; &nbsp; this.timer = setInterval(this.render, 1000);&nbsp; }}var clock = new Clock({ template: "" });clock.start();

Answer 3

setInterval需要一个回调函数。你不应该执行它。start =() => {&nbsp; &nbsp; &nbsp;this.timer = setInterval(() => this.render(), 1000);&nbsp; &nbsp;}class Clock {&nbsp; constructor(template) {&nbsp; &nbsp; this.template = template;&nbsp; &nbsp; this.timer = this.timer;&nbsp; &nbsp;// this.date = new Date(); // call date&nbsp; }&nbsp; render = () => {&nbsp; &nbsp; const date = new Date();&nbsp; &nbsp; let hours = date.getHours(); // get hours&nbsp; &nbsp; if (hours < 10) hours = '0' + hours;&nbsp; &nbsp; let minutes = date.getMinutes(); // get minutes&nbsp; &nbsp; if (minutes < 10) minutes = '0' + minutes;&nbsp; &nbsp; let seconds = date.getSeconds(); // get seconds&nbsp; &nbsp; if (seconds < 10) seconds = '0' + seconds;&nbsp; &nbsp; let output = hours + ':' + minutes + ':' + seconds;&nbsp; &nbsp; console.log(output)&nbsp; &nbsp; return output; // output&nbsp; }&nbsp; stop = () => { // stop interval&nbsp; &nbsp; clearInterval(this.timer);&nbsp; }&nbsp; start = () => { // start interval&nbsp; &nbsp; this.timer = setInterval(this.render, 1000);&nbsp; }}var clock = new Clock({ template: '' });clock.start();

Answer 4

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