如何防止在更改月份時jQuery日期選擇器的閃爍？

我創建了一些jQuery日期選擇器，有幾天有顏色（週末，節假日）。事實是，那個日子的顏色決定取決於一個ajax調用，它返回一個月中的哪一天必須被着色。如何防止在更改月份時jQuery日期選擇器的閃爍？

當我點擊按鈕更改月份時，ajax調用完成，它返回要着色的日期，dateplicker閃爍，然後正確顯示月份。我希望在ajax調用完成後顯示新的月份，而不是早些時候。有什麼辦法可以避免閃爍？它似乎在Internet Explorer中正常工作，但它在Firefox中不起作用。

Image

編輯

如果你在改變月份按鈕的點擊，在日期選擇器調用beforeShowDay每天在當月呈現它。如果你在console.log中放置了一個斷點（下面的jsfiddle示例），你會看到datepicker已經關閉，並且直到繪製完每天都不會呈現。在我的情況下，我想保持舊月，直到新月被完全畫出。

在下面的例子中，日曆的繪製速度非常快，並且每月的日子渲染得如此之快以至於看起來很快，但是如果您執行一些可以檢索數據庫數據的ajax調用決定每天的顏色，這個月會閃爍。與Internet Explorer不同，這個問題發生在我身上的Firefox中。

我該如何解決？

小提琴例如：

http://jsfiddle.net/b6V3W/370/

beforeShowDay: tratarDiasEspeciales, 

function tratarDiasEspeciales(date){ 
    ajax call to decide the colour of the cell 

    if(condition){ 
     //colour the day with blue 
     return[true,'blue'] 
    }else{ 
    //colour the day with red 
    return[true,'red'] 
    } 
}

來源

2017-01-02 Jaime

你可以用你的代碼創建一個jsfiddle嗎？ –

@AminurRashid代碼添加。 – Jaime

問題的解決方案是在庫名爲jquery-ui.custom-1.9.1.custom.js。在該庫，還有下面的代碼行：

inst.dpDiv.empty().append(this._generateHTML(inst));

該行首先刪除日期選擇器的數據（標頭一個月和一年的數據和天），然後追加新的一個月的HTML代碼generatedHTML功能。

爲了解決這個問題，我將代碼分爲兩部分：首先，我得到了新的HTML代碼，然後我清空datepicker's數據追加新的HTML代碼：

var quitar = this._generateHTML(inst); 
inst.dpDiv.empty().append(quitar);

這種解決方案的Ajax調用由第一和日曆保持inmutable（它doesn't閃爍），然後當新代碼準備就緒時插入。

我知道這不是解決問題的最佳方式（如果我更改了jquery版本，我將不得不在那裏更改代碼），但這是我找到的唯一方法。

來源

2017-01-03 15:25:24 Jaime

您是否在我的答案上檢查了我的新評論？它應該模擬與你的答案相同的東西（阿賈克斯調用是在渲染開始之前進行的，從而防止閃爍） –

是的，我已經檢查過它，它是有道理的。這是一個正確的答案，但是我的應用程序的製作方式很難將代碼從一個站點更改爲另一個站點（這是一個巨大的方法，我也沒有編寫它）。爲了節省時間，我決定使用我自己的解決方案，但我不會放棄在將來使用你的解決方案。謝謝你的回答和你的時間;） – Jaime

很高興知道這是一個正確的答案:) –

我已經通過修改公司創造了另一個fiddle。在這裏，我已將您的業務邏輯部分（ajax調用來從數據庫檢索數據以決定顏色）轉換爲onChangeMonthYear回調函數。

$("#dater").datepicker('option', 'onChangeMonthYear', onChangeMonthYearCustom);

在這裏，您可以填充一個名爲renderedDates一個數組，其中將包含所有數據着色日期，最重要的是，這個回調函數保持當前呈現的日曆UI在執行這個回調函數「beforeShowDay」之前調用回調函數。我在執行時設置了調試點，並確保這是事實。所以，現在在「beforeShowDay」回調之前，您的代碼不必等待ajax調用結束，從而滿足您的要求。請檢查此解決方案，並讓我知道它是否按預期工作。

來源

2017-01-03 14:49:30

我已經嘗試過了，但如果您在renderCallendarCallBack函數的第一行中放置斷點，它仍然會閃爍。它首先刪除datepickers內部的所有html，然後，當新的html準備就緒時，它會插入它。 – Jaime

如果您將斷點放入renderCallendarCallBack函數中，那麼它顯然會停止UI渲染，從而導致閃爍。由於ajax調用將不再駐留在此回調函數中，因此您必須將斷點放入onChangeMonthYearCustom回調函數中。 –

如何防止在更改月份時jQuery日期選擇器的閃爍？

回答

相關問題