Question

我目前正在建立Twitter帖子的实时馈送。我成功地使用10秒的时间间隔发布新推文，新推文立即弹出。

但是，我显示自创建推文以来的时间，例如“24秒前”或“1天前”并希望在不重新加载页面的情况下实时更新这些值。但是，我不想使用10秒的其他间隔，而是使用1秒的新间隔，以显示第一个第二个更改。

我创建了一个正确更新时间的函数，但这对我的AJAX调用添加的新元素不起作用。提出一些代码：

HTML 并不重要，重要的部分是具有“时差”类的跨度，其持有“2秒”或“3天”并且应该动态更改。

<div class="row tweet-wrapper" data-crdate="' . $tw_timestamp . '">
<div class="col-xs-1 user-profile-picture">
    <img class="img-responsive" src="' . $user_profile_pic . '">
</div>
<div class="col-xs-11 tweet-content">
    <p class="tweet-header">
        <a href="https://twitter.com/' . $user_screen_name . '">' . $user_screen_name . '</a>

        <span class="tweet-header-sub">' . $user_name . '</span>
    </p>
    <p class="tweet-content">
        ' . $tw_text . '
    </p>
    ' . (!empty($images) ? '
    <p>
        ' . $images . '
    </p>
    ' : '') . '
    <p class="tweet-footer">
        <span class="tweet-footer-time">
            <a href="https://twitter.com/' . $tw_gen_screen . '/statuses/' . $tw_gen_tw_id . '">
                <img height="15" width="15" src="res/img/twitter-logo.svg"> 
                <span class="time-difference">' . $difference_show . ' ' . $difference_word . '</span> ago
            </a>
        </span>
    </p>
</div>
</div>

JQuery - AJAX-Call - $（'。container-fluid'）。prepend（data）;将新容器添加到我的包装器div

function loadNewTweets() {
var latestTweet = $('div.tweet-wrapper:first').data('crdate');

$.get('res/php/update.php', { latest: latestTweet }, function(data) {
    if(data && data != '') {
        $('.container-fluid').prepend(data);

        window.scrollTo(0, 0);
    }
}, 'html');
};

除了调用函数的间隔外，还有任何$（function（）{}）调用。

var intervalLoadTweets = setInterval(function() {
    loadNewTweets();        
}, 1000 * loadNewTweetsInterval);

Update.php（提供ajax） 基本上做了大量的事情来格式化推文，通过比较它们的时间戳来过滤掉现有的推文，然后返回一个与上面完全相同的div容器。

我不能设置一个小提琴，因为我不想透露我的制作twitter api的秘密，但我认为没有它应该是可以理解的。

我已经看到了类似问题的不同答案（更新间隔，重新声明功能......）但这些似乎都不适合我，因为现有（页面加载）推文的时间在实时时间更新，但是通过Ajax新添加的推文根本没有改变。

我构建了一个几乎完全相同的Codepen，添加内容但没有AJAX，它可以工作：https://codepen.io/anon/pen/PKVmbg

显然，ajax给我带来了麻烦，但我不知道如何解决这个问题。

修改：功能改变时间值：

var reloadTweetTimes = function() {
$.each(findElement, function() {
    var crdate      = $(this).data('crdate');
    var nowts       = parseInt($.now() / 1000);
    var difference  = nowts - crdate;

    var difference_word = '';
    var difference_show = '';

    if(difference == 1) {
        difference_word = 'second';
        difference_show = difference;
    } 
    else if(difference < 60) {
        difference_word = 'seconds';
        difference_show = difference;
    } 
    else if(difference >= 60 && difference < (60 * 2)) {
        difference_word = 'minute';
        difference_show = parseInt((difference / 60));
    }
    else if(difference < (60 * 60)) {
        difference_word = 'minutes';
        difference_show = parseInt((difference / 60));
    }
    else if(difference >= (60 * 60) && difference < (60 * 60 * 2)) {
        difference_word = 'hour';
        difference_show = parseInt((difference / 60 / 60));
    }
    else if(difference < (60 * 60 * 24)) {
        difference_word = 'hours';
        difference_show = parseInt((difference / 60 / 60));
    }
    else if(difference >= (60 * 60 * 24) && difference < (60 * 60 * 24 * 2)) {
        difference_word = 'day';
        difference_show = parseInt((difference / 60 / 60 / 24));
    }
    else {
        difference_word = 'days';
        difference_show = parseInt((difference / 60 / 60 / 24));
    }

    $(this).find('.time-difference').text(difference_show + ' ' + difference_word);

    $('.tweet-wrapper').css('opacity', 1);
});
};

Interval调用函数

var intervalRefreshTimes = setInterval(function() {
    reloadTweetTimes();
}, 1000 * refreshTimesInterval);

Answer 1

我仍然有点不清楚reloadTweetTimes正在迭代哪些元素，因为你没有findElement的定义。但我怀疑问题是findElement是jQuery对象，只绑定到文档加载时存在的元素。如果这是真的，你有两个选择：

使用ajax加载后，将新元素添加到findElement 添加文件。
每次reloadTweetTimes运行时搜索新项目。（如果页面加载太多元素，可能会变慢）

如果要添加findElement的设置方式，我可以为两者提供代码示例。

Answer 2

在ajax调用的success方法中添加更新时差代码。如果你在ajax调用之后更新，那么DOM将不可用，因为$ .get（）将创建一个新线程。

$.get('res/php/update.php', { latest: latestTweet }, function(data) {
if(data && data != '') {
    $('.container-fluid').prepend(data);
    // Add here the time difference calculation function.
    window.scrollTo(0, 0);
}
}, 'html');
};

通过AJAX更改动态添加元素的内容而无需重新加载

2 个答案: