Как предотвратить мерцание курсора при вводе текста в IE8?

Question

Я заметил, что при запуске подпрограммы обновления по времени с использованием jQuery курсор в текстовых вводах мерцает в IE8.

Вероятно, мне следует пожать плечами и двигаться дальше ... это явно не конец света, все работает нормально и т. Д. ... но мне интересно, что происходит.

мерцает:

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

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

не мерцает:

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

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

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

Я понимаю, что при использовании jQuery возникают дополнительные издержки ... но у меня сложилось впечатление, что селекторы, как показано выше, довольно эффективны.

Итак, что дает?

FWIW, живые примеры здесь:

http://jsfiddle.net/PrrE2/ (при использовании jQuery - мигает)

http://jsfiddle.net/PrrE2/2/ (при использовании простого JS - не мерцает)

Answer 1

Я предполагаю, что проблема заключается в том, что вы используете метод text. Когда вы вызываете это, jQuery запускает эту функцию:

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);
}

Это неизбежно будет медленнее, чем установка innerHTML, и вполне может быть источником вашего ощущаемого мерцания.

Чтобы проверить это, вы можете использовать те же селекторы, но сделать $target.get(0).innerHTML = timeRemaining;.