setTimeout doing lose value of variable?

1

I will summarize the code because mine is too big, come on. I have a global variable of type boolean that gets false, when entering an if it has to receive instead of false true, but when it enters the setTimeout the boolean is returning "undefined" instead of returning true. I made this code for you to understand more or less how it is occurring, but the first if does not catch for some reason.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Memoria3Page } from '../memoria3/memoria3';

@Component({
  selector: 'page-memoria2',
  templateUrl: 'memoria2.html',
})
export class Memoria2Page {
  verificaViradasCima: number = 0;
  cartaViradaCima1: boolean = false;
  cartaViradaCima2: boolean = false;

  cartaViradaBaixo1: boolean = false;
  cartaViradaBaixo2: boolean = false;

  constructor(public navCtrl: NavController, public navParams: NavParams) { 
  }

  fase2(): void{
    this.navCtrl.setRoot(Memoria3Page);
  }
  ionViewDidLoad(){
    console.log("Memoria Fase 2");

    criaTabueliro1();
  }

  gameOver(): void{
    if(document.getElementById("virada0").style.zIndex == "998" && document.getElementById("virada1").style.zIndex == "998" && 
       document.getElementById("virada2").style.zIndex == "998" && document.getElementById("virada3").style.zIndex == "998" &&
       document.getElementById("virada4").style.zIndex == "998" && document.getElementById("virada5").style.zIndex == "998"){
        document.getElementById("nextNivelButton").style.visibility = "visible";
        document.getElementById("msgFinish").style.visibility = "visible";
    }
  }

  point(): void{
    document.getElementById("bloqueiaClick").style.zIndex = "995";
    this.verificaViradasCima =0;
    document.getElementById("imgAcerto").className = "pontuacao";
    setTimeout(function(){
      document.getElementById("imgAcerto").className = "imgAcerto";
    },1500);
    this.gameOver();
  }

  pararParaVerificar(): void{
    if(this.verificaViradasCima == 2){

      console.log(vetor[0] +" "+ vetor[1] +" "+ vetor[2] +" "+ vetor[3] +" "+ vetor[4] +" "+ vetor[5]);
      // Verifica a carta 1
      if(vetor[0] == vetor[1] && this.cartaViradaCima1 == true && this.cartaViradaCima2 == true){
        console.log("ENTROU IF");
        this.cartaViradaCima1 = false;
        this.cartaViradaCima2 = false;
        this.point();

      }

      else{
        console.log("Entrou else"+this.cartaViradaBaixo1+this.cartaViradaBaixo2+this.cartaViradaBaixo3+this.cartaViradaBaixo4+this.cartaViradaBaixo5+this.cartaViradaBaixo6);
        this.verificaViradasCima = 0;

        // Este é o if em que é recebido o this.cartaViradaBaixo1 == true e this.cartaViradaBaixo2 == true porém perde o valor ao entrar no setTimeout mais abaixo
        if(vetor[0] != vetor[1] && this.cartaViradaCima1 == true && this.cartaViradaCima2 == true){
          console.log("Entrou no else, e dps no if 1");
          this.cartaViradaCima1 = false;
          this.cartaViradaCima2 = false;
          this.cartaViradaBaixo1 = true;
          this.cartaViradaBaixo2 = true;
        }

         setTimeout(function(){
          if(vetor[0] != vetor[1] && this.cartaViradaBaixo1 == true && this.cartaViradaBaixo2 == true){
            console.log("Entrou no else setTimeOut, e dps no if 1");
            document.getElementById("bloqueiaClick").style.zIndex = "999";
            document.getElementById("virada0").style.zIndex = "996";
            document.getElementById("virada1").style.zIndex = "996";
            document.getElementById("virada0").style.visibility = "hidden"; 
            document.getElementById("virada1").style.visibility = "hidden";
            this.cartaViradaBaixo1 = false;
            this.cartaViradaBaixo2 = false;

          }

           document.getElementById("bloqueiaClick").style.zIndex = "995";
         },2000)
      }
    };
  };

In this last setTimeout doing when trying to make the condition in the IF is not done successfully because "this.cartaViradaBaixo1 == true & &. this.cartaViradaBaixo2 == true" are not returning true but undefined.

NOTE: I can not use jQuery;

    
asked by anonymous 21.10.2017 / 21:03

2 answers

0

Your problem is the reference to this . This is a fairly recurring error in JavaScript. The this you use in the setTimeout callback is not necessarily the same as this you have in the setTimeout call context.

The callback of setTimeout is usually invoked with the value this being window in the browser.

One solution to your problem would be to use bind :

setTimeout(function () { /* implementação */ }.bind(this))
    
22.10.2017 / 23:28
0

In addition to the bind quoted by Thiago (which will affect this ) you can simply create a variable to refer to this :

var $this = this;

setTimeout(function(){
  if(vetor[0] != vetor[1] && $this.cartaViradaBaixo1 == true && $this.cartaViradaBaixo2 == true){
    console.log("Entrou no else setTimeOut, e dps no if 1");
    document.getElementById("bloqueiaClick").style.zIndex = "999";
    document.getElementById("virada0").style.zIndex = "996";
    document.getElementById("virada1").style.zIndex = "996";
    document.getElementById("virada0").style.visibility = "hidden"; 
    document.getElementById("virada1").style.visibility = "hidden";
    $this.cartaViradaBaixo1 = false;
    $this.cartaViradaBaixo2 = false;

  }

   document.getElementById("bloqueiaClick").style.zIndex = "995";
 },2000)
    
23.10.2017 / 00:42