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();它只会显示一个底部的框，我希望它通过点击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来调用它。

编辑：这是从我的小提琴中取出的片段。

基本上，它将每个盒子连接起来作为它自己的聊天容器，每个盒子上都有一个间隔计时器，只有当盒子可见时才会更新。

$(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>");
}

我创建了一个小提琴，在这里演示了这一点：http://jsfiddle.net/xDaevax/7efVX/

我不清楚代码的哪些部分应该放在ChatFunction中，但是你应该能够从这段代码和我的例子中得到一般的想法，无论你想通过聊天完成什么。< / p>

Answer 2

你必须在js中使用set inter val使用milisec：

setInterval(function(){$('.box').show();}, 10000);

$('.box').show();每10秒跑10000mil = 10秒

或者如果需要其他代码，可以在此代码中使用$('.box').show();替换。

和setInterval信息为here

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

2 个答案: