Develop Reference

not able to update the UI from setTimeout() in vuejs [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 1 year ago.
i want to update name of person after every second in ui after feching name from lifeSpanObj object in .vue file (vuejs).
<div> {{personName}}</div> // in template using this this(its example not exactly this)
this.lifeSpanObj.forEach((element, i) => {
setTimeout(function () {
this.personName = element.name;
console.log(this.personName);
}, 1000);
});
using the above example i am able to print updated values in console but UI does not get updated. what could fix for this?

Make sure always use arrow function to not shadow this keyword:
this.lifeSpanObj.forEach((element, i) => {
setTimeout(() => { // arrow function instead of anonymous function
this.personName = element.name; // now this refers to the vue component
console.log(this.personName);
}, 1000);
});
for primitive function (in ES5) you can still follow the below approach
this.lifeSpanObj.forEach((element, i) => {
var self = this;
setTimeout(function () {
self.personName = element.name;
console.log(self.personName);
}, 1000);
});

How to call a javascript function declared inside typescript function? [duplicate]

This question already has answers here:
Calling a Function defined inside another function in Javascript
(11 answers)
Closed 4 years ago.
Class A {
callUpdate() {
// how to call the update function from here
}
create() {
function update() {
// do something
}
}
}
How to call local function outside which declared inside the function?

May be it s help you
class A {
callUpdate() {
this.create()();
}
create() {
return function update() {
console.log('do something') }
}
}
let newA = new A();
newA.callUpdate();

JavaScript recursive setTimeout [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 6 years ago.
I defined this class in JavaScript:
function Signal(lbl, ho, tag) {
this.lbl = lbl;
this.ho = ho;
this.tag = tag;
this.getstatus = function () {
if (this.ho) {
$.get('/get.cgi?' + this.tag + '=?0', function (data) {
console.log(data);
setTimeout(this.getstatus, 1000);
});
}
};
}
Once getstatus is called, it should start calling itself with setTimout, but it doesn't! It only works one time.
If I use a function without a class, it works!
Please help me out.
Thanks!

The problem is when getStatus is invoked by the timer, this inside the method does not refer to the object, you can pass a custom value for this using bind(). Also note that in the ajax callback this refers to the ajax settings object.
function Signal(lbl, ho, tag) {
this.lbl = lbl;
this.ho = ho;
this.tag = tag;
this.getstatus = function () {
if (this.ho) {
var signal = this;
$.get('/get.cgi?' + this.tag + '=?0', function (data) {
console.log(data);
setTimeout(signal.getstatus.bind(signal), 1000);
});
}
};
}

Get return value from setTimeout [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 3 years ago.
The community is reviewing whether to reopen this question as of 9 days ago.
I just want to get the return value from setTimeout but what I get is a whole text format of the function?
function x () {
setTimeout(y = function () {
return 'done';
}, 1000);
return y;
}
console.log(x());

You need to use Promises for this. They are available in ES6 but can be polyfilled quite easily:
function x() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('done!');
});
});
}
x().then((done) => {
console.log(done); // --> 'done!'
});
With async/await in ES2017 it becomes nicer if inside an async function:
async function() {
const result = await x();
console.log(result); // --> 'done!';
}

You can't get a return value from the function you pass to setTimeout.
The function that called setTimeout (x in your example) will finish executing and return before the function you pass to setTimeout is even called.
Whatever you want to do with the value you get, you need to do it from the function you pass to setTimeout.
In your example, that would be written as:
function x () {
setTimeout(function () {
console.log("done");
}, 1000);
}
x();

Better to take a callback for function x and whatever task you want to perform after that timeout send in that callback.
function x (callback) {
setTimeout(function () {
callback("done");
}, 1000);
}
x(console.log.bind(console)); //this is special case of console.log
x(alert)

You can use a combination of Promise and setTimeOut like the example below
let f1 = function(){
return new Promise(async function(res,err){
let x=0;
let p = new Promise(function(res,err){
setTimeout(function(){
x= 1;
res(x);
},2000)
})
p.then(function(x){
console.log(x);
res(x);
})
});
}

I think you want have flag to know event occured or no. setTimeout not return a value. you can use a variable to detect event occured or no
var y="notdone";
setTimeout(function () {
y="done";
}, 1000);
You can access variable y after timeout occured to know done or not

How to correctly reference an object method within itself in Javascript? [duplicate]

This question already has answers here:
Referencing "this" inside setInterval/setTimeout within object prototype methods [duplicate]
(2 answers)
Closed 8 years ago.
What is the correct way to reference an object function from within itself, so that I can call it several times using setTimeout in Javascript? In other words I want to be able to do this:
Foo.prototype.move = function() {
if (this.count_a < 5) {
this.count_a += 1;
// setTimeout(this.move, 500); // doesn't work
// setTimeout(function() { this.move(); }, 500); // doesn't work
}
}
I have tried a couple of things, none of which seem to work: http://jsfiddle.net/tga8r/1/

this has a global scope when the window timer function runs- it is out of your function and in the window.
label the this-
Foo.prototype.move= function(){
var T= this;
if(T.count_a<5){
T.count_a += 1;
setTimeout(function(){T.move();},500);
}
}

The this property within the timeout will point to the object, that does execute the passed callback.
use .bind(this) to say, that the invoker have to use the this point to the passed object.
Foo.prototype.move = function() {
if (this.count_a < 5) {
this.count_a += 1;
// setTimeout(this.move, 500);
setTimeout(function() { this.move(); }.bind(this), 500);
}
}
or use a reference:
Foo.prototype.move = function() {
var self = this;
if (this.count_a < 5) {
this.count_a += 1;
// setTimeout(this.move, 500);
setTimeout(function() { self.move(); }, 500);
}
}

function move (a) {
setTimeout(
function() {
if (a < 10) {
a = a+ 1;
move(a);
}
}, 500); }
move(0);