Question

我有一个带有过渡的网页，点击一切进入opacity:0（1秒持续时间），然后交换新页面，一切都进入opacity:1（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（）很慢，页面空白的时间太长了。理想情况下，我想知道承诺需要多长时间才能实现，并从setTimeout时间中减去它。我现在在想，我必须手动创建一个新的日期对象，并在承诺履行后检查差异。

有更好的解决方案吗？

Answer 1

我忘记了我可以使用承诺。

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

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

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

Answer 2

在您的请求之前和之后获取时间。这可能不准确，但是大多数情况下都可以轻易忽略误差范围，包括误差范围。

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

Answer 3

您可以使用Date.now()并计算差异。

var start = Date.now();

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

Answer 4

很难确切地说出您要完成的内容，但是尝试遵循您的逻辑，您似乎希望在隐藏旧内容后一秒钟内显示您的新内容除非内容花费的时间长于加载的内容，否则它会在加载时显示。你可以通过将这个过程分解为几个步骤来实现。

记录开始时间。
使用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);
    }
});

使用这种通知和时间测量方案，没有关于加载时间的猜测。

Answer 5

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

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

});

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

5 个答案: