Question

我注意到使用jQuery运行定时gui更新例程会使文本输入中的光标在IE8中闪烁。

我应该耸耸肩继续前进......它显然不是世界末日，一切正常，等......但我很好奇发生了什么。< / p>

抖动：

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/（使用普通ol＆＃39; 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;。

如何防止IE8中文本输入中的光标闪烁？

1 个答案: