如何防止IE8中文本輸入中的光標閃爍？

Question

我注意到，使用jQuery運行定時gui更新例程會使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;。