Javascript 聊天应用程序赢得'；t在jquery中每10秒加载一次

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

您必须在js与milisec的工作中使用set inter val:

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

$（'.box'）.show（）每10秒运行10000mil=10秒

或者，如果需要其他代码，可以用
$（'.box'）.show（）替换在此代码中

而
setInterval
info is
您需要将执行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>");
}

$（文档）.ready（函数（）{
var-box=$（'.box'）[0]；//目标框的单个副本
$（'.contact'）。单击（函数（）{
var id=$（this）.closest（'.contact'）.attr（'id'）；//加载用户id
如果（$（“.chat windows”）.find（“#”+id+“-window”）.exists（））{
如果（$（“.chat windows”）.find（“#”+id+“-window”）是（“：可见”））{
//什么也不要做，因为窗户已经在那里了
}否则{
$（“.chat windows”）.find（“#”+id+“-window”）.fadeIn（200）.css（“显示”、“内联块”）；
}
}否则{
//这是一个新的盒子，所以展示它
var newBox=box.cloneNode（）；
变量窗口=$（“.chat窗口”）；
$（newBox.find（“.chat header”）.text（id）；
$（newBox）.prop（“id”，id+“-window”）；
//var username=$（this.find（'.username'）.attr（'id'）；
append（$（newBox））；
$（newBox）.fadeIn（200）.css（“显示”、“内联块”）；
updateChat({
联系人id:id
});
setInterval（函数（）{
如果（$（newBox）.is（“：可见”））{
updateChat（{ContactID:id}）；
}否则{
//什么都不做，这样我们就不会更新那些看不见的东西，也不会浪费时间
}//如果结束/else
}，10000）；//每10秒对这个盒子开火一次
}//如果结束/else
});
$（文档）。在（“单击”，“关闭聊天”，功能（e）{
$（e.currentTarget）.parent（）.fadeOut（100）[0].removeNode（）；
});
});
//全局原型函数，用于确定选择器是否返回null
$.fn.exists=函数（）{
返回此值。长度！==0；
}; // 结束函数存在
函数updateChat（args）{
//在这里做你的Ajax
/*$.ajax({
url:'ajax/chat.php'，
键入：“POST”，
数据：{
“id”：args.ContactID
},
async:false，
现金：错，
成功：功能（数据）{
$（'#chat'）.html（数据）；
}
});*/
$（“#”+args.ContactID+“-window”）.find（“.messages”）.append（“
”+“我的消息”+”
”）；
}

我制作了一把小提琴，在这里展示了这一点：

我不清楚您的代码的哪些部分应该放在聊天功能中，但您应该能够从这段代码和我的示例中获得大致的想法，而不管您试图通过聊天实现什么。
您在做什么，尝试每10秒“加载”一次？您可以查看类似于
setInterval（）
的内容。查找诸如“长轮询”之类的术语，用于不断从服务器请求数据。还可以看看“web套接字”，了解服务器将数据推送到浏览器的方式。如果您希望构建javascript聊天应用程序，我建议您改为查看node.js。这里的这个问题可能会回答您的问题：我使用了它，我将ajax代码放在函数中，我使用了setInterval，然后浏览器将被禁用此行为是由于ajax调用内部
单击
事件造成的。按照建议，使用
setInterval（function（）{ajax}，10000）；//10000ms=10s
。我使用了你的代码，但它使我的浏览器速度非常慢。信息被隐藏了好吧，我的回答中的代码只是一个例子。如果您在问题中添加HTML标记和其他javascript，我可以让它更有用。当您在问题中说load时，您的意思是希望页面每10秒检查服务器更新一次，并更新每个框的内容，或者你的意思是什么？我的意思是，现在当我与我的朋友聊天时，例如，当我单击“发送”时，它应该动态地显示在聊天框中，而无需单击联系人或刷新浏览器，并且它应该为他显示，不仅是附加信息，我也清楚地看到了你问题的范围。我将更新我的答案，但是还有很多其他的事情要考虑（如果你有15个聊天打开，那么16个用户将有一个窗口，每10秒调用一个服务器，一个用户每10秒钟调用服务器16次）。这可能无法很好地扩展，您可能希望制作一篇ajax文章来为用户返回所有消息，但这远远超出了这个问题的范围。
$(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>");
}