console.timeEnd（「」），以供參考IF函數（JavaScript）的

Question

我的代碼的當前版本是如何工作的：

當用戶的鼠標指針懸停一個導航元素的網頁的背景圖片漸變爲更小的不透明版本。 當鼠標離開導航元素時，它將返回到前一個圖像。

這種情況的代碼看起來是這樣的：

$(document).ready(function(){ 
    $("li a").mouseenter(function(){ 
    $('.image').fadeTo(100, 0.5, function() { 
    $(".image").css("background","url(images/backdrop_smaller.png)"); 
    }); 
    }); 
$("li a").mouseout(function(){ 
    $('.image').fadeTo(100, 1.0, function() { 
    $(".image").css("background","url(images/backdrop_orig.png)"); 
    }); 
    }); 
}); 

與此唯一的問題是，如果用戶快速移動在導航元素的圖像快速移動之間（看起來令人迷惑），並最終滯後於用戶的背後命令（由於.fadeTo時間間隔）。

爲了防止這種情況，我想我會設置一個控制檯計時器來打印用戶離開導航元素並進入另一個時間的時間。然後創建一個if函數來指示第一個mouseout轉換是否完成。

計時器看起來是這樣的：

$(document).ready(function(){ 
    $("li a").mouseout(function(){ 
    console.time("time") 
}); 
}); 

    var FunctionEndTime = $(document).ready(function(){ 
    $("li a").mouseenter(function(){ 
    var end = console.timeEnd("time") 
}); 
}); 

我的問題就出在引用此打印控制檯時，如果函數，然後也通過防止引發.mouseout褪色從播放到結束。例如，如果時間差小於褪色時間（100ms），則褪色將停止轉換。這將使小少不透明的背景圖像，並防止迷失方向圖像閃爍和

這裏是我不工作的代碼如下所示：

function TimeReset() { 
    if (end < 25) 
    { 
    $(document).ready(function(){ 
    $("li a").mouseout(function(){ 
    $('.image').fadeTo(100, 0.5, function() { 
    $(".image").css("background","url(images/backdrop_smaller.png)"); 
     }); 
    }); 
}); 
} 

上面明顯的代碼不會做，我想什麼，被引用事情不正確。我只是不確定如何正確地做到這一點。

問題是：我在想這一切都不正確嗎？或者我只是不知道如何實現代碼完成？

Answer 1

爲防止快速移動光標時閃爍，您可以考慮在排隊新動畫步驟之前使用$.stop()。 應該看起來像：

$('.image').stop().fadeTo(100, 0.5, function() { ... 

注意$ .stop（）有兩個可選參數，可以是有幫助的。