setTimeout in a callback function not working

Question

Can someone find a problem in the code below

$(document).ready(function () {
 $("#leftsettingswindow").on("keyup", "#fontsize2", function () {
 setTimeout(function () {
 var txtVal = this.value;
 $('#content').css("font-size", txtVal + "%");
 }, 3000);
 });
});

this works flawlessly,

$(document).ready(function () {
 $("#leftsettingswindow").on("keyup", "#fontsize2", function () {
 var txtVal = this.value;
 $('#content').css("font-size", txtVal + "%");
 });
});

Any ideas?

• doniyor: What is the console error message?
• user1967599: still no resizing happening even after changing this.value; to your suggestion
• user1967599: event.returnValue is deprecated. Please use the standard event.preventDefault() instead. 2 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

Answer 1

this is not a local variable, so it isn't saved in the closure. You need to bind a local variable to it:

$(document).ready(function () {
 $("#leftsettingswindow").on("keyup", "#fontsize2", function () {
 var savedThis = this;
 setTimeout(function () {
 var txtVal = savedThis.value;
 $('#content').css("font-size", txtVal + "%");
 }, 3000);
 });
});

Answer 2

setTimeout does not invoke in the same scope. So this is not the same this as in your 2nd example.

...
var self = this;
setTimeout(function () {
 var txtVal = self.value;
 $('#content').css("font-size", txtVal + "%");
}, 3000);
...

Answer 3

Credit to Barmar who answered this on another thread.

"this" is not a local variable, so it isn't saved in the closure. You need to bind a local variable to it:

$(document).ready(function () {
 $("#leftsettingswindow").on("keyup", "#fontsize2", function () {
 var savedThis = this;
 setTimeout(function () {
 var txtVal = savedThis.value;
 $('#content').css("font-size", txtVal + "%");
 }, 3000);
 });
});

Answer 4

In code snippet, "this.value" returns "undefined" after 3 secs.

So, use selector, instead of this

$(document).ready(function() {
 $("#leftsettingswindow").on("keyup", "#fontsize2", function() {
 setTimeout(function() {
 var txtVal = $('#fontsize2').val();
 $('#content').css("font-size", txtVal + "%");
 }, 3000);
 });
});