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

Chat application won't load every 10 seconds in jquery

本文关键字：加载 10秒 一次 jquery 聊天 应用程序      更新时间：2023-09-26

我正在创建一个聊天应用程序，我在左边有一个菜单，其中包含我想要聊天的人。我使用了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>

您需要将执行Ajax调用的代码拆分为它自己的函数。然后，您可以像下面这样通过click和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，但是你应该能够从这段代码和我的例子中得到一般的想法，不管你想用聊天完成什么。

你必须在js工作中使用set interval:

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

$('.box').show();每10秒运行一次10000mil = 10秒

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

和setInterval信息在这里

相关文章：