小编Gav*_*ker的帖子

我用PHP创建了一个简单的聊天框.我希望这能够加载所有新消息并滚动到底部chatbox.我正在使用AJAX重新加载新邮件,但似乎无法将其向下滚动到新邮件显示的底部.

我试过使用down.scrollTop = down.scrollHeight;但不能让它正常运行.

有什么帮助吗？

<div id="tab3">
    <h2>Chat Room</h>

    <div id="c-input_wrap">
        <div id="chatlog">
            Loading chat please wait...
        </div>


        <div id="chatwrap">
            <div id="chatinput">
                <form name="chatbox" class="userchat">
                    <input class="userchat" name="message" type="text" autocomplete="off" onkeydown="if (event.keyCode == 13) document.getElementById('chatbutton').click()" autofocus/><br>
                    <input class="userchat" id="chatbutton" name="submitmsg" type="button" onclick="submitChat()" value="Send" />
                </form>
            </div>
        </div>
    </div>
</div>

<script>
var form = document.querySelector('form[name="chatbox"]');
form.addEventListener("submit", function (event) {
    event.preventDefault();
});

function submitChat() {
    if(chatbox.message.value == '') {
        alert('Error: Missing Fields.');
        return;
    }
    var message = chatbox.message.value; …

背景

我制作了一个PHP脚本,通过POST循环访问用户的ID,向许多用户发送电子邮件.当我尝试使用大量用户(1000+)的脚本时,脚本会超时.

为了解决这个问题,我决定在前端使用AJAX,单独发送每个请求.我已经设置了一个简单的示例页面来测试我的代码.PHP脚本延迟五秒钟.我希望每五秒钟收到一个请求.但是,我得到了五秒的延迟,然后是所有的响应.随着更多的研究,我发现我的AJAX调用是链接,这不是我想要的.相反,我只想在最后一次AJAX调用完成时发送下一个请求.

码

HTML

<form id='frmAjax' method='post' action='run_form.php'>
    <span>1</span><input type="checkbox" name='option' value='test1'><br>
    <span>2</span><input type="checkbox" name='option' value='test2'><br>
    <span>3</span><input type="checkbox" name='option' value='test3'><br>
    <span>4</span><input type="checkbox" name='option' value='test4'><br>
    <span>5</span><input type="checkbox" name='option' value='test5'><br>
    <span>6</span><input type="checkbox" name='option' value='test6'><br>
    <span>7</span><input type="checkbox" name='option' value='test7'><br>
    <span>8</span><input type="checkbox" name='option' value='test8'><br>
    <span>9</span><input type="checkbox" name='option' value='test9'><br>

    <input id='btnAjax' type='button' value='Submit AJAX'>
</form>

Javascript代码

$("#btnAjax").click(function() {
    var options = $("#frmAjax input:checkbox:checked");

    $(options).each(function(i) {
        var postData = {option: $(options[i]).val()};

        $.ajax({
            type: "POST",
            data: postData,
            url: "run_ajax.php", 
            success: function(result) {
                console.log(result);
            },
            statusCode: { …