时间戳

首页 > 解决方案 > 为什么有些回调函数只用“setTimeout(this.functions, 1000);”调用它们？但其他人需要有箭头功能才能工作

javascript - 为什么有些回调函数只用“setTimeout(this.functions, 1000);”调用它们？但其他人需要有箭头功能才能工作

问题描述

例如，我有这个程序调用一些具有设定超时的函数，一些函数只是调用它们（setTimeout（this.siguienteNivel，1500）；但其他需要（代码的最后一个）箭头函数，（​setTimeout（（ ) =>​this.iluminarSecuenciaFinal();}, 1000 * i);) 如果缺少箭头函数，则该函数在这些特定情况下不会触发，我不明白为什么要区分这个，程序在一个类中，我不明白知道这是否有所作为

这是一块，如果需要，完整的代码是这样的： https ://github.com/moorooba/simon/blob/master/index.html

>  elegirColor(ev) {
          const nombreColor = ev.target.dataset.color;
          const numeroColor = this.transformarColorANumero(nombreColor);
          this.iluminarColor(nombreColor);
          if (numeroColor === this.secuencia[this.subnivel]) {
            this.subnivel++;
            if (this.subnivel === this.nivel) {
              this.nivel++;
              this.eliminarEventosClick();
              if (this.nivel === ULTIMO_NIVEL + 1) {
                this.ganador();
              } else {
                setTimeout(this.siguienteNivel, 1500);
              }
            }
          } else {
            this.perdio();
          }
        }

        // ganoElJuego() {
        //   swal("Platzi", "Felicitaciones, ganaste el juego!", "success").then(
        //     this.inicializar
        //   );
        // }

        // perdioElJuego() {
        //   swal("Platzi", "Lo lamentamos, perdiste :(", "error").then(() => {
        //     this.eliminarEventosClick();
        //     this.inicializar();
        //   });
        // }

        perdio() {
          loser.classList.remove("hide");
          setTimeout(this.startos, 1000);
          this.eliminarEventosClick();
        }

        startos() {
          loser.classList.add("hide");
          boton.classList.remove("hide");
        }

        ganador() {
          console.log("diparo");
          this.eliminarEventosClick();
          for (let i = 0; i < 4; i++) {
            // setTimeout(this.iluminarSecuenciaFinal, 1000 * i);
            setTimeout(() => {
              this.iluminarSecuenciaFinal();
            }, 1000 * i);
          }
          // setTimeout(this.ganoJuego, 4000);
          setTimeout(() => {
            this.ganoJuego();
          }, 4000);
        }

        ganoJuego() {
          console.log("ganojuego");
          winner.classList.remove("hide");

          // setTimeout(this.restart, 1500);

          setTimeout(() => {
            this.restart();
          }, 1500);
        }

标签： javascript

解决方案

您必须了解thisJavaScript 的工作原理：

class Foo {
  bar = 'bar';
 
  log() {
    console.log(this.bar);
  }
  
  method() {
    setTimeout(this.log);
    setTimeout(() => this.log());
  }
}

const obj = new Foo;

obj.method();

在此示例中，（代表代码的相关部分）该method函数尝试以log两种不同的方式调用。

在第一个中，它将引用this.log作为 的参数传递setTimeout。该setTimeout函数接收一个函数作为参数，它不知道声明它的上下文，就好像你从类中提取它一样。在这种情况下，当函数执行并评估为this时正在评估。结果是因为是。windowundefinedwindow.barundefined

在第二个中，它传递一个箭头函数，其特殊性是在声明this时保留。当它执行时，引用类的实例，因此结果与调用. 结果就是这种情况。thisobj.log()'bar'

推荐阅读