Javascript 有没有办法在准确的时间兑现承诺？

我有一个带有过渡的网页，点击所有内容都进入

opacity:0

（持续1秒），然后交换一个新页面，所有内容都进入

opacity:1

（持续1秒）

如果页面没有一秒钟的时间隐藏和显示，它就会看起来很奇怪。此外，如果两个页面之间的页面没有立即交换，则看起来会有奖励

这是我的第一个密码

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

但是load（）有时需要花费太长时间才能抓取视图，而且由于css是立即实现的，因此当它插入时，不透明度已经

1

所以我试了一下：

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

但是现在如果$.get（）速度慢，则页面空白的时间太长。 理想情况下，我想知道履行承诺需要多长时间，并从设置超时时间中减去。 我现在想，我必须手动创建一个新的日期对象，并在履行承诺后检查差异

---

有更好的解决方案吗？

只需在您的请求前后留出时间。这可能不准确，但在大多数情况下，误差很容易被忽略，包括您的

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);
})

您可以使用

Date.now（）

计算差值

var start = Date.now();

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

---

您可以使用ajax并使代码同步

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

});

---

我忘了我可以用承诺

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

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

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

---

要准确地说出您要完成的任务有点困难，但按照您的逻辑，您似乎希望在隐藏旧内容后的一秒钟内显示新内容，除非加载内容所需时间超过该时间，否则在加载时会显示新内容。您可以通过将流程分解为几个步骤来实现这一点

记录开始时间

使用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);
    }
});

---

使用这种通知和时间度量方案，就不会猜测加载时间。

这不是OP要求的，而且

async:false

通常是不好的。一般来说，我也不会做async-false，但在他的情况下，这是有意义的，并且比依赖基于时间的东西更一致。他并不是因为要替换整个页面的内容而阻止任何点击，他不希望动画在ajax之后运行，他已经可以很容易地做到这一点了。这对情况没有任何帮助。