We Keep Coding

How do i pass this to SetTimeout() function in javascript?

var workViewer = {
container: document.documentElement,
popup: document.querySelector('.avgrund-popup'),
cover: document.querySelector('.avgrund-cover'),
init: function () {
this.addClass(this.container, 'avgrund-ready');
window.avgrund = {
activate: this.activate,
deactivate: this.deactivate,
disableBlur: this.disableBlur
};
},
activateModal: function (state) {
setTimeout(function () {
this.parent.removeClass(popup, 'no-transition'); //this line
this.parent.addClass(this.container, 'avgrund-active'); //this line
}, 0);
},
removeClass: function (element, name) {
element.className = element.className.replace(name, '');
}
};
module.exports = workViewer;
I want to pass this into setTimeout function, whats the right way to do it?
This is my first post, please let me know if i can improve it in any way

There's two major ways. The first is saving a reference to this and using it instead:
var self = this;
setTimeout(function() {
self.parent.removeClass(popup, 'no-transition');
self.parent.addClass(self.container, 'avgrund-active');
}, 0);
The other is to use bind to create a new function with this bound to the given value.
setTimeout(function() {
this.parent.removeClass(popup, 'no-transition');
this.parent.addClass(this.container, 'avgrund-active');
}.bind(this), 0);
If you're running in an environment that supports them, you can also use an arrow function.
setTimeout(() => {
this.parent.removeClass(popup, 'no-transition');
this.parent.addClass(this.container, 'avgrund-active');
}, 0);

You can use Function.prototype.bind(). It creates function which is bounded to the given context:
setTimeout(function () {
this.parent.removeClass(popup, 'no-transition'); //this line
this.parent.addClass(this.container, 'avgrund-active'); //this line
}.bind(this), 0);

call methods in callback

I have this Try class:
function Try () {
console.log('Start')
this.Something( function() {
console.log('asd')
this.Some()
})
}
Try.prototype.Something = function (callback) {
console.log('hi all')
callback()
}
Try.prototype.Some = function () {
console.log('dsa')
}
But when I try to call the Some method in the callback part, it gives me an error, which says this.Some is not a function. What is the problem? How can i fix this?

scope of this is different inside a different function, even if it is inner function
you need to preserve this of outer function in self and make it
function Try () {
console.log('Start')
var self = this;
self.Something( function() {
console.log('asd')
self.Some();
})
}

Delay eventListener

In JavaScript, I have an element (which is an input tag).
This code :
element.addEventListener("focus", function () {
this.parentNode.parentNode.style.outline = this.parentNode.parentNode.dataset.ans_outline;
});
When the input is focused, outline is changed immediately.
My question is : how could I delay this event ?
I've tried :
element.addEventListener("focus", function () {
setTimeout(function(node) {
node.parentNode.parentNode.style.outline = node.parentNode.parentNode.dataset.ans_outline;
}(this), 1000)
});
.. But it doesn't work :(

try this:
element.addEventListener("focus", function () {
var node = this;
setTimeout(function() {
node.parentNode.parentNode.style.outline = node.parentNode.parentNode.dataset.ans_outline;
}, 1000)
});
First argument of setTimeout function is function you want to execute (do not call this function directly).
You can store reference to this in node variable and then use it inside your timed out function (see closures)

Remove the reference to the this and give it this way:
element.addEventListener("focus", function () {
$this = this;
setTimeout(function() {
$this.parentNode.parentNode.style.outline = $this.parentNode.parentNode.dataset.ans_outline;
}, 1000)
});

Run setInterval immediately

I am trying to execute a setInterval function immediately after a button is pressed, then run the function every 5 seconds.
Why does this work:
$(function () {
$('button').on('mousedown', function () {
var checkUser = setInterval(function () {
}, 5000);
checkUser();
});
});
But not this:
$(function () {
$('button').on('mousedown', function () {
var checkUser = setInterval(function () {
}(), 5000);
});
});

Your first one is not executing a function to start as you think it is. Interval retruns an id, not a reference to the method being called. There should be an error in the console.
The second one is calling the function and storing what the function returns as the interval. In your case it is not returning anything so it is storing undefined.
Store the function, reference it, and call it.
$(function () {
$('button').on('mousedown', function () {
var myFunc = function () {
};
var checkUser = setInterval(myFunc, 5000);
myFunc();
});
});
or use Timeout instead of interval.
$(function () {
$('button').on('mousedown', function () {
var myFunc = function () {
/* do stuff */
setTimeout(myFunc, 5000);
};
myFunc();
});
});

SetTimeout Executing faster then assigned interval

I have assigned 5000 ms to Settimeout but it is executing before assigned time interval.Can any body explain why it is happening.
<script type="text/javascript">
var getcallback = {
closure: function (callback, functionparam) {
return callback.call(functionparam);
}
}
var cleartimeout;
var startSlideShow = {
timerid: 5000,
startAnimation: function () {
cleartimeout = setTimeout(getcallback.closure(function () {
alert("this is a basic example of chaining methods");
this.startAnimation();
},this), this.timerid);
},
stopAnimation:function(){
}
}
startSlideShow.startAnimation();
</script>

Because getcallback.closure() is executing the function right away, you are not storing a reference to a function to call at a later time.

As soon as you call startAnimation, you're calling getcallback.closure, which immediately calls the callback function. To use setTimeout correctly, you need to either have closure return a function, or not use such a strange thing, and instead just use an anonymous function.
Something along the lines of:
var getcallback = {
closure: function (callback, functionparam) {
return function() {
callback.call(functionparam);
};
}
}
...
Or, to be cleaner, just:
var cleartimeout;
var startSlideShow = {
timerid: 5000,
startAnimation: function () {
cleartimeout = setTimeout(function () {
alert("this is a basic example of chaining methods");
this.startAnimation();
}, this.timerid);
},
stopAnimation:function(){
}
}
startSlideShow.startAnimation();