有没有一种方法可以在一个准确的时间实现一个承诺

Is there a way to fulfill a promise at an exact time?

本文关键字：实现 一个承诺 一个 时间 一种 方法 有没有      更新时间：2023-09-26

我有一个有过渡的网页，点击一切都转到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时间减去。我现在想，我必须手动创建一个新的日期对象，并检查承诺履行后的差异。

有更好的解决方案吗?

我忘了我可以只使用promise。

var pagePromise = $.get('/views/'+name+'.html')
$('main').css('opacity', '0')
setTimeout(function(){
    pagePromise.then(  function(page){ 
       $('main').html(page).css('opacity', '1') } 
    )
},1000)

请在请求前后安排时间。这可能不准确，但在大多数情况下，可以很容易地忽略误差范围，包括您的。

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

很难确切地说出您要完成的内容，但尝试遵循您的逻辑，似乎您希望新内容在隐藏旧内容后的一秒钟内显示，除非内容需要比加载时间更长，在这种情况下，它在加载时显示。你可以把这个过程分成几个步骤来完成。

  1. 记录启动时间
  2. 使用ajax获取您的内容
  3. 当内容被获取时，检查已经过了多少时间。
  4. 如果超过一秒，则插入内容并显示。
  5. 如果不到一秒的时间，那么设置一个计时器，然后在计时器触发时显示内容。

你可以这样实现这个逻辑:

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

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

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

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