有没有办法在确切时间履行承诺？

我有一个转换的网页，在点击一切都将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

有没有办法在确切时间履行承诺？

回答

相关问题