Question

我发出ajax请求，并将此请求的内容（JSON数组）附加到HTML元素以显示它。
案例流程如下：ajax请求每5秒 - ＆gt;将每个项目附加到HTML元素 - ＆gt;显示它们。
元素以旋转木马的形式显示。
这是我使用的代码：

Ajax电话：

var fetchMessages = function(config) {
    setInterval(function () {
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: config.url,
            success: function (query_result, status) {
                displayMessage(query_result);
            },
            error: function (_, status) {
                console.log(status);
            }
        });

    }, 5000);
};

displayMessage()将从每个JSON项创建一个div，并将此div附加到HTML元素。

var displayMessage = function(messages) {

    messages.forEach(function(message) {

        // Create the new div.
        var container = $(document.createElement('div'));
        container.addClass('text-center block');

        // Assemble all the stuff. (item created before)
        container.append(<all the stuff>)

        // Get the corresponding HTML element and append the newly created div.
        var sliding_divs_bloc = $('#messages_divs');
        sliding_divs_bloc.append(container);

        // See facts below
        console.log('Appended: '+message.raw);

    });

    slide(messages.length);

};

最后，slide()方法将滑动div

var slide = function(nbMessages){

    // Only if there is > 1 message, slide them:
    if(nbMessages > 1){
       setTimeout(function(){
              $box.animate({ // Defined above
                  scrollLeft: '+=' + $box.width()
              }, 2000);
          }
       }, 50000);
    }
}

因此，当我手动刷新页面时，此工作流程非常有效。这意味着如果JSON数组包含3个项目，则这3个项目将正确显示

但是，当我动态填充我的JSON数组时，不显示此JSON数组中的新项目（除非我手动刷新页面）。

事实：

我确定检测到该项目，因为我可以在console.log(message.raw)

displayMessage()

我确定有新消息，因为nbMessages会在检测到新消息后立即递增。

考虑到所有这些，为什么我的代码在ajax调用之后不会显示所有消息（来自JSON数组的项目），即使我确定它在那里，并且当我手动刷新页面时它也可以工作？

修改
在罗里的帮助下解决了。在附加所有内容之前添加$('#messages_divs').empty();。

附加内容不会显示。 JavaScript的

0 个答案: