有沒有辦法在確切時間履行承諾？

我有一個轉換的網頁，在點擊一切都將opacity:0（持續1秒），然後一個新的頁面被換入，一切都將opacity:1（持續1秒）有沒有辦法在確切時間履行承諾？

它最終看起來怪異，如果頁面沒有精確的1秒鐘來隱藏並顯示。此外，如果該頁面沒有在兩者之間立即交換，它看起來很有價值。

這是我的第一個代碼

$('#main').css('opacity', '0'); 
setTimeout(function(){ 
    $('#main').load('/views/'+name+'.html').css('opacity', '1') 
}, 1000);

但是負載（）有時需要太長搶視圖，並且由於CSS是立即執行的透明度已經1當它交換。

所以我想這：

$.get('/views/'+name+'.html', function(page){ 
    setTimout(function(){ 
     $('#main').html(page).css('opacity', '1') 
    },1000); 
})

但現在如果$獲得（）是緩慢的，頁面是空白時間過長。理想情況下，我想知道承諾花了多長時間完成，並從setTimeout時間中減去。我現在在想，我必須手動創建一個新的日期對象，並檢查承諾履行後的差異。

有沒有更好的解決方案？

來源

2016-08-12 lonewarrior556

我忘了我只能使用承諾。

var pagePromise = $.get('/views/'+name+'.html') 

$('main').css('opacity', '0') 

setTimeout(function(){ 
    pagePromise.then( function(page){ 
     $('main').html(page).css('opacity', '1') } 
    ) 
},1000)

來源

2016-08-12 21:10:06 lonewarrior556

只是在你的請求之前和之後得到時間。這可能不準確，但對於大多數目的而言，容錯率容易被忽略，包括您的。

var time = Date.now(); 
$.get('/views/' + name + '.html', function(page) { 
    var elapsed = Date.now() - time; 
    setTimout(function() { 
    $('#main').html(page).css('opacity', '1') 
    }, 1000 - elapsed); 
})

來源

2016-08-12 21:07:06 Ozan

您可以使用Date.now()並計算差異。

var start = Date.now(); 

$.get('/views/' + name + '.html', function(page) { 
    setTimout(function() { 
     $('#main').html(page).css('opacity', 1); 
    }, 1000 - (Date.now() - start)); 
});

來源

2016-08-12 21:08:17 eisbehr

-4

您可以使用ajax並使您的代碼同步。

jQuery.ajax({ 
    url: '/views/'+name+'.html', 
    success: function (result) { 
     $('#main').html(page).css('opacity', '1'); 
    }, 
    async: false, 
    type: "GET" 

});

來源

2016-08-12 21:09:04

這不是OP所要求的，'async：false'通常不好。 – Ozan

通常我不會做異步錯誤，但在他的情況下它是有道理的，並且比依賴基於時間的東西更一致。這不像他阻止任何點擊的東西，因爲他正在替換整個頁面的內容。 –

他不希望動畫在ajax之後運行，他已經可以輕鬆地做到這一點。這對任何情況都沒有幫助。 – Ozan

它有點分不清究竟你想什麼來完成的，而是試圖按照你的邏輯，似乎你希望你的新內容在一秒鐘內顯示出來，你躲在舊的內容，除了後當內容花費比在這種情況下加載的時間更長時，它在加載時顯示。您可以通過將流程分成幾個步驟來完成。

記錄開始時間。
使用ajax獲取您的內容
當獲取內容時，檢查已經過了多長時間。
如果超過一秒鐘，然後插入內容並顯示它。
如果過了不到一秒鐘，然後爲剩餘時間設置一個計時器，然後在該計時器觸發時顯示內容。

您可以實現像這樣的邏輯：

var begin = Date.now(); 
var main = $('#main').css('opacity', '0'); 
$.get('/views/'+name+'.html').then(function(content) { 
    main.html(content); 
    var elapsed = Date.now() - begin; 
    if (elapsed > 1000) { 
     // show it now 
     main.css('opacity', '1'); 
    } else { 
     setTimeout(function(){ 
      // show it when 1 second has finished 
      main.css('opacity', '1'); 
     }, 1000 - elapsed); 
    } 
});

使用這種通知和時間的測量方案，也沒有猜測加載時間。

來源

2016-08-12 22:14:15 jfriend00

有沒有辦法在確切時間履行承諾？

回答

相關問題