javascript - 如何在ajax轮询中发送div的最后一个类？

Question

我的 ajaxPoll 聊天系统遇到问题。我正在尝试将聊天消息 div 的最后一个 ID 发送回 php，因此查询只能显示高于最后发送的 id 的结果。

所有聊天消息都位于名为 chat_log 的 div 中。消息周围有一个 div ，其中包含消息 ID 的类。它将包含文本 message，然后是该消息的 ID，例如:class="message543"。好的，为了更容易理解，这里有一个 HTML 示例，其结构和顺序都正确。

<div id='chat_log'>
    <div class='message435'></div>
    <div class='message436'></div>
    <div class='message437'></div>
    <div class='message438'></div>
    <div class='message439'></div>
    <div class='message440'></div>
    <div class='message441'></div>
</div>

如您所见，div max 中有 7 条消息。任何高于该值的消息都会被删除(如果工作正常的话，只是一点额外的信息。)另一件事要注意，我使用 jquery找到库和 jquery 插件 here ，记入 this博客文章。 (有关该插件功能的信息可以找到 there 。)

<小时/>

我尝试过的:

function ajaxGo() {
    $.ajaxPollSettings.pollingType = "interval";
    $.ajaxPollSettings.interval = 700;
    $.ajaxPollSettings.maxInterval = 1000;
    $.ajaxPollSettings.durationUntilMaxInterval = 2000;

    var httpcount = 1;

    var lastDiv = lastDiv = $('#chat_log').find('div:last-child');
    var lastId = lastDiv[0].className.substring(7);

    $.ajaxPoll({
        url: "place_chat/update.php",
        type: "POST",
        data: {
            where: where,
            'last': lastId
        },
        dataType: "html",
        cache: false,

        successCondition: function (result) {
            var responseString = result;

            if (result != '') {
                $(result).appendTo('#chat_log').show();
                lastDiv = lastDiv = $('#chat_log').find('div:last-child');
                lastId = lastDiv[0].className.substring(7);
                console.log(lastId);
                httpcount = httpcount + 1;

                if (!hasFocus && !titleCurrentlyChanging) {
                    changeTitle();
                }

                soundHandle = document.getElementById('soundHandle');
                soundHandle.src = '../Sounds/Message.wav';
                soundHandle.play();
            }
        }

    });
}

$(document).ready(function () {
    $('#chat_log').append('<div class="message0">Test</div>');

    setTimeout(ajaxGo, 500);
}); 

<小时/>

代码去掉字符串“message”，然后获取号码。代码:

lastDiv = lastDiv = $('#chat_log').find('div:last-child');
lastId = lastDiv[0].className.substring(7);
console.log(lastId);

...粘贴到控制台时可以正常工作，并输出正确的最后一个 div 的消息 id。

但是，当非手动运行时，它不会(可能是因为它不在函数中或循环中或其他什么情况下)，由于某种原因，代码仅发送“0”，当有是 id 为 1000+ 的其他消息。我还尝试了许多其他方法，例如 setInterval 等。我认为可能导致问题的一件事是变量范围，就好像成功时 function 正在调用 poll，它不会调整 lastId 变量。但我并不完全确定情况是否如此。如果是这样，我将不胜感激有关如何修复变量范围以使代码正常工作的支持。

顺便说一句，php 运行成功，所以我不需要任何帮助。

重要编辑(使问题更容易理解):代码

lastDiv = lastDiv = $('#chat_log').find('div:last-child');
lastId = lastDiv[0].className.substring(7);

...工作正常，问题出在它的周围区域(结构)。另外，where 与此无关，where 只是告诉 php 脚本是从哪里发送的。我知道第一个附加了一个名为 test 的 div，用于将第一个 lastId 定义为 0。 循环应该处理获取最新的lastId，但事实并非如此。

我发现了什么:lastId 未在 ajaxPoll 中编辑，它从 div 获取正确的 lastId，但不编辑 lastId。这几乎可以肯定这是一个范围问题

Answer 1

其中一个问题是ajaxPoll。您创建要发送的数据一次，并且不会在每次轮询时重新评估。

另一个问题是 lastId 是 ajaxGo 函数的本地函数。将其移到外面。

这是一个jsfiddle使用 jQuery.ajax 和 setInterval:

var lastId = 0;

function ajaxGo() {

    $.ajax({
        url: "/echo/html/",
        type: "POST",
        data: {
            'last': lastId,
            html: '<div class="message' + (parseInt(lastId) + 1) + '">' + (parseInt(lastId) + 1) + '</div>'
        },
        dataType: "html",

        success: function(result) {

            if (result) {
                $(result).appendTo('#chat_log').show();
                lastDiv = $('#chat_log').find('div:last-child');
                lastId = lastDiv[0].className.substring(7);
                console.log(lastId);

/*                if (!hasFocus && !titleCurrentlyChanging) {
                    changeTitle();
                }

                soundHandle = document.getElementById('soundHandle');
                soundHandle.src = '../Sounds/Message.wav';
                soundHandle.play();*/
            }
        }

    });
}

var timer = setInterval(ajaxGo, 1000);​

一些与您的问题无关的代码已被注释掉或省略。