Question

I’ve noticed that running a timed gui update routine using jQuery makes the cursor inside text inputs flicker in IE8.

I should probably shrug and move on… it’s clearly not the end of the world, everything works fine, etc… but I’m curious what’s going on.

Flickers:

var $target = $("#timer"),
    timeRemaining = 9999;

(function timer() {
   timeRemaining = timeRemaining - 1;
   $target.text(timeRemaining );
   setTimeout(timer, 30);
})();

Does Not Flicker:

var target = document.getElementById("timer"),
    timeRemaining = 9999;

(function timer() {
   timeRemaining = timeRemaining - 1;
   target.innerHTML = timeRemaining;

    setTimeout(timer, 30);
})();

I realize there is additional overhead when using jQuery… but was under the impression that selectors as shown above are pretty efficient.

So, what gives?

FWIW, live examples here:

http://jsfiddle.net/PrrE2/ (using jQuery – this flickers)

http://jsfiddle.net/PrrE2/2/ (using plain ol’ JS – DOES NOT flicker)

Answer 1

My guess is that the problem lies in your use of the text method. When you call this, jQuery runs this function:

function (text) {
    if (jQuery.isFunction(text)) {
        return this.each(function (i) {
            var self = jQuery(this);

            self.text(text.call(this, i, self.text()));
        });
    }

    if (typeof text !== "object" && text !== undefined) {
        return this.empty().append((this[0] && this[0].ownerDocument || document).createTextNode(text));
    }

    return jQuery.text(this);
}

That’s inevitably going to be slower than setting innerHTML, and may well be the source of your perceived flicker.

To test this, you could use the same selectors but do $target.get(0).innerHTML = timeRemaining;.