console fails to return a function even when it is defined

Question

console fails to return a function even when it is defined

After clicking the "stopCrash" button, I want the function backAgain to be executed 2 seconds later. However, I am encountering an error in the console: Uncaught TypeError: this.backAgain is not a function.

Do you have any suggestions on how to fix this issue?

methods:{
    backAgain(){
      this.winning = 0;
      this.betAmount = 0;
      this.moneyValue = null;
    },
    cashOut(){
      clearTimeout(this.tessst);
      this.money = Number(this.money) + Number(this.winning);
      setTimeout(function(){
        this.backAgain()
      },2000)
    }}

<button class="stopCrash" @click="cashOut">Cash out</button>

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

One of the reasons why you lose this is when setting a timeout because regular function(){} does not preserve the context of this. However, arrow functions do preserve the context. You can learn more about the differences between them.

setTimeout(() => this.backAgain(), 2000)

Answer 2

One of the reasons why you lose this is when setting a timeout because regular function(){} does not preserve the context of this. However, arrow functions do preserve the context. You can learn more about the differences between them.

setTimeout(() => this.backAgain(), 2000)

Answer 3

Answer №2

It is recommended to utilize an arrow function when accessing the this context :

  withdrawFunds(){
      clearTimeout(this.timer);
      this.balance = Number(this.balance) + Number(this.winnings);
      setTimeout(()=>{
        this.returnBalance()
      },2000)
    }}

Answer 4

It is recommended to utilize an arrow function when accessing the this context :

  withdrawFunds(){
      clearTimeout(this.timer);
      this.balance = Number(this.balance) + Number(this.winnings);
      setTimeout(()=>{
        this.returnBalance()
      },2000)
    }}

Answer 5

Answer №3

To ensure proper binding, you can utilize arrow functions which automatically bind 'this' for you. If you're working with IE 11 and don't have access to arrow functions, you can use the following method to bind:

setTimeout(function(){ this.backAgain() }.bind(this), 2000)

In your specific scenario, you can also bind and execute using either call or apply:

setTimeout(this.backAgain.call(this), 2000)

Answer 6

To ensure proper binding, you can utilize arrow functions which automatically bind 'this' for you. If you're working with IE 11 and don't have access to arrow functions, you can use the following method to bind:

setTimeout(function(){ this.backAgain() }.bind(this), 2000)

In your specific scenario, you can also bind and execute using either call or apply:

setTimeout(this.backAgain.call(this), 2000)

Answer 7

Answer №4

this may be lost once the callback is invoked, however a workaround could involve utilizing a local variable within its closure (the common practice of retrieving variables from surrounding "outer" blocks of code with the added twist that these variables remain accessible even after the immediate code block containing them has completed execution), ensuring that they are not lost:

cashOut(){
  clearTimeout(this.tessst);
  this.money = Number(this.money) + Number(this.winning);
  var diz = this;             // <--- store
  setTimeout(function(){
    diz.backAgain();          // <--- use
  },2000)
}}

Answer 8

this may be lost once the callback is invoked, however a workaround could involve utilizing a local variable within its closure (the common practice of retrieving variables from surrounding "outer" blocks of code with the added twist that these variables remain accessible even after the immediate code block containing them has completed execution), ensuring that they are not lost:

cashOut(){
  clearTimeout(this.tessst);
  this.money = Number(this.money) + Number(this.winning);
  var diz = this;             // <--- store
  setTimeout(function(){
    diz.backAgain();          // <--- use
  },2000)
}}

console fails to return a function even when it is defined

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there any need for transpiling .ts files to .js when Node is capable of running .ts files directly?

Mobile version experiencing issue with Navbar not collapsing

The setter function for a boolean value in React's useState hook is malfunctioning

Issue with error handling not being triggered when calling SAPUI5 function()

Steps for resetting data() on a route without parameters:

Decode a JavaScript string without the need to save it as a file

Safely render user-generated HTML content within a React application to prevent cross-site scripting vulnerabilities

WebDriver encounters difficulty clicking on a certificate error popup window

Exploring ways to utilize Next.js (React) for formatting date and time with either Moment.js or alternate

Fasten the component to various keys

Access Flask variable in JavaScript code

Including a 3DS card to a Stripe Client for recurring payments

Do two Express JS applications run on separate threads?

Is there a method to access the output of getStaticProps function from NextJS API routes?

Tips for troubleshooting a node module that is part of a build process

Error 4 encountered when attempting to upload files using Ajax to a PHP server

What is the best way to showcase data from input fields within a bootstrap modal dialog?

Node: effectively managing SQL scripts with dynamic variable replacement

Extracting the JQuery library from its source code

removing the mapStateToProps function will result in an undefined value