setTimeout doing lose value of variable?

Asked

Viewed 121 times

1

I’ll summarize the code because mine’s 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 the true, but when entering setTimeout the boolean is returning "Undefined" instead of true. I made this code for you to understand more or less how 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 when doing while trying to make the condition in IF is not done successfully because "this.cartTiradaBaixo1 == true && this.cartTiradaBaixo2 == true" are not returning true but Undefined.

NOTE: I cannot use jQuery;

angular typescript

  • But there’s nothing to call this if. Those ifthey wouldn’t have to be inside the function?

  • In my original code they are, there was only a small way for you to try to understand more or less how the problem is happening.

  • Blz, but so there is no way to reproduce the problem. Looking at the code you have put, there seems to be no error.

  • Try to put the code to run and see if the boolean returns true, you will see that not because of setTimeout, instead it will return Undefined...

  • I edited the publication see if it was better like this...

2 answers

0

Your problem is the reference to this. This is a fairly recurring error in Javascript. O this that you use in the callback of the setTimeout is not necessarily the same this that you have in the context of setTimeout.

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

A solution to your problem would be to use bind:

setTimeout(function () { /* implementação */ }.bind(this))

0

Beyond the bind quoted by Thiago (who will affect the this) you can simply create a variable to refer to the 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)

Browser other questions tagged angular typescript

You are not signed in. Login or sign up in order to post.