Variables in a setTimeout function (jQuery)

Question

I'm trying to use a jQuery statement inside a setTimeout function, but I don't get it to work. I tried a lot of variants, like this one (I'm using 'this' because the setTimeout is inside an each function, and the selector is cached/stored in an object, thus the $selector):

setTimeout("" + this.$selector + ".val('" + this.savVal + "')", 1);

How do I have to write this?

Thanks!

Answer 1

When you need to preserve the current this item when calling setTimeout use this structure:-

setTimeout((function(self) {
  return function() { $selector.val(self.savVal) };
})(this), 1);

This creates a closure from the outer functions execution context. The outer function returns an inner function that will have access the self parameter. Its the inner function that gets called when the timeout occurs yet the value of self will hold on to the original this value.

Answer 2

AnthonyWJones provided a great answer, but there's another similar one, which is slightly easier to write and read. You simply store the value of "this" in a local variable., ie.

var storedThis = this;
setTimeout(function() { $selector.val(storedThis.savVal); }, 1);