javascript - 聊天应用程序不会在 jquery 中每 10 秒加载一次

Question

我正在创建一个聊天应用程序，左侧有一个菜单，其中包含我想与之聊天的人。我使用了 JQuery 和 ajax，它工作正常，它正在获取消息，但它不会加载，除非或直到我单击联系人，它才会加载。我希望它每 10 秒加载一次。

这是我的 JQuery 代码:

    $('.contact').click(function(){
    $('.box').show();
    var username = $(this).find('.username').attr('id');
    var id = $(this).closest('.contact').attr('id');
    $('.name').html(fnalnc);
    $.ajax({
            url: 'ajax/chat.php',
            type: 'POST',
            data: {'id':id},
            async: false,
            cashe: false,
            success: function(data){
                $('#chat').html(data);
            }
        });
    });

并且 $(.box).show(); 它只会显示底部的 1 个框，我希望它通过单击联系人来显示多个框，就像 Facebook 。

HTML:

<div class='contact' id='<?php echo "$user_id";?>'></div>
<span class='username' id='<?php echo "$username";?>'><?php echo "$username";?></span>
<div id='chat'></div>

Answer 1

您需要将执行 Ajax 调用的代码拆分为它自己的函数。然后，您可以通过单击和 setInterval 调用它，如下所示。

编辑:这是从我的 fiddle 中摘取的片段。

本质上，它将每个框连接起来作为它自己的聊天容器，并且每个框上都有一个间隔计时器，仅在框可见时更新。

$(document).ready(function () {
    var box = $('.box')[0]; //single copy of the target box
    $('.contact').click(function () {
        var id = $(this).closest('.contact').attr('id'); // load the user id
        if ($(".chat-windows").find("#" + id + "-window").exists()) {
            if($(".chat-windows").find("#" + id + "-window").is(":visible")) {
            //Do nothing, because the window is already there
            } else {
                $(".chat-windows").find("#" + id + "-window").fadeIn(200).css("display", "inline-block");
            }
        } else {
            //This is a new box, so show it
            var newBox = box.cloneNode();
            var windows = $(".chat-windows");
            $(newBox).find(".chat-header").text(id);
            $(newBox).prop("id", id + "-window");
            //var username = $(this).find('.username').attr('id');                   
            windows.append($(newBox));
            $(newBox).fadeIn(200).css("display", "inline-block");
            updateChat({
                ContactID: id
            });
            setInterval(function() {

                if($(newBox).is(":visible")) {
                    updateChat({ContactID: id});
                } else {
                    //do nothing so we aren't updating things that aren't seen and wasting time
                } // end if/else
            }, 10000); // fire every 10 seconds for this box
        } // end if/else

    });
    $(document).on("click", ".close-chat", function(e) {
        $(e.currentTarget).parent().fadeOut(100)[0].removeNode(); 
    });
});

//Global prototype function to determine if selectors return null
$.fn.exists = function () {
    return this.length !== 0;
}; // end function exists

function updateChat(args) {
    //Do your Ajax here
    /*$.ajax({
            url: 'ajax/chat.php',
            type: 'POST',
            data: {
                'id': args.ContactID
            },
            async: false,
            cashe: false,
            success: function (data) {
                $('#chat').html(data);
            }
        });*/
    $("#" + args.ContactID + "-window").find(".messages").append("<li>" + "My Message" + "</li>");
}

我创建了一个 fiddle 来演示这一点:http://jsfiddle.net/xDaevax/7efVX/

我不清楚您的代码的哪些部分应该放入 ChatFunction 中，但无论您想通过聊天完成什么任务，您都应该能够从这段代码和我的示例中获得总体思路。