jQuery .text（）速度太慢（回調可能？）

我已經爲jQuery編寫了一個工具提示插件，當用戶將鼠標懸停在元素上時，它會顯示帶有指定文本的工具提示。默認情況下，提示會顯示在光標的右上角，但如果工具提示太寬而無法放在頁面上，則會顯示在左上角。我遇到的問題是，在使用.text（）之後，我需要檢查工具提示的新寬度，看它是否比窗口寬度寬，但似乎有延遲，使得新寬度isn在我已經調用.width（）之後才設置。因此，例如，工具提示以空格開始，即使我在.width（）之前調用.text（），但在我調用.width（）時，div仍處於寬度0.下面是代碼我一直在使用：jQuery .text（）速度太慢（回調可能？）

$.fn.tooltip = function(tText) { 
    this.each(function() { 
     $(this).unbind('.tipE').bind('mouseenter.tipE', function(e) { 
      $('#toolTip') 
       .hide() 
       .stop(true, true) 
       .text(tText) 
       .positionAtCursor(e) 
       .fadeIn('fast'); 
     }).bind('mouseleave.tipE', function() { 
      $('#toolTip').fadeOut('fast'); 
     }).bind('mousemove.tipE', function(e) { 
      $('#toolTip').positionAtCursor(e); 
     }); 
    }); 
}; 

$.fn.positionAtCursor = function(e) { 
    return this.each(function() { 
     var top = e.pageY - 25; 
     var left = e.pageX + 10; 

     var rightBound = $(window).width(); 
     if (rightBound && (e.pageX + $(this).width() > rightBound)) { 
      left = e.pageX - $(this).width() - 20; 
     } 

     $(this).css({ 'top' : top, 'left' : left }); 
    }); 
};

有什麼辦法，我可以有針對的.text（回調），這樣我可以等待調用positionAtCursor（）？或者我的代碼中還存在其他一些缺失的缺陷？

感謝

來源

2011-04-07 Andrew Duthie

原來這實際上是用「鼠標移動」的問題之前「的mouseenter」被調用。所以，由於直到'mouseenter'才設置文本，第一次調用positionAtCursor時寬度看起來是0。它似乎工作正常，現在我已添加'：可見'到'mousemove'中的選擇器：

$('#toolTip:visible').positionAtCursor(e);

來源

2011-04-07 16:55:34

啊好的工作:) – Calum 2011-04-07 18:34:41

而不是.text(tText).positionAtCursor(e)嘗試：

.html(
    function(index,oldhtml){ 
     $(this).html(tText); 
     if($(this).html()!==oldhtml){ $(this).positionAtCursor(e); } 
    }); 
)

可能是一個相當原始的方法，但也許會工作。

我想你可能也有

while($(this).html()==oldhtml){ $(this).html(tText); } 
$(this).positionAtCursor(e);

來源

2011-04-07 15:38:57 Calum

會第一個解決方案永遠不會調用positionAtCursor因爲目前的HTML總是比不同舊的HTML（除非，如你所建議的，你循環它）？有一段時間循環關注我，因爲它可能會導致一些掛起，但我認爲延遲太小以至於不應該有明顯的延遲。希望有一個更直接的方法。 – 2011-04-07 16:21:18

我還沒有嘗試過使用這個，但我假設oldhtml是HTML元素之前，你設置新的HTML。因此，如果尚未更新，則當前的html將與舊的html相同。 – Calum 2011-04-07 18:34:24

我面臨同樣的問題。

的解決方案是在這裏： https://stackoverflow.com/a/2716286/1238317

你應該使用dequeue()：

$('#toolTip') 
    .hide() 
    .stop(true, true) 
    .queue(YOUR_DEQUEUED_FUNCTION()) 
    .positionAtCursor(e) 
    .fadeIn('fast');

其中：

YOUR_DEQUEUED_FUNCTION = function() { 
$(this).dequeue(); 
$('#toolTip').text(tText); 
// ANY OTHER CODE BEFORE NEXT THINGS EXECUTED :) 
}

來源

2012-12-05 22:53:59 fider

jQuery .text（）速度太慢（回調可能？）

回答

相關問題