Question

如何制作＆＃34; case＆＃39; chatLine＆＃39;：＆＃34;等待一段时间后再发送params在屏幕上打印。我试图放置一个setTimeout()，但它不会等到我想要它的时间。我甚至创建了一个ajax函数来进入一个sleep(10)的PHP文件，然后返回到主渲染案例，但它不能这样做。不知道为什么......

我如何设置每10秒阅读聊天时间的时间？例如，如果同时提交了2个或更多的聊天行，则它们按照他们进入的顺序在10秒内显示。在同一时间提交的行将是Line1，Line2和line3：

第1行：你好

//显示LINE 2后10秒

第2行：HI

//显示LINE 3后10秒

第3行：伟大

wait.class.php文件是

完整的代码是：
http://tutorialzine.com/2010/10/ajax-web-chat-php-mysql/
http://tutorialzine.com/2010/10/ajax-web-chat-css-jquery/

这就是我在PHP文件中所做的一切。我正在制作的是ajax中的网络聊天，我希望能够显示

// The login method hides displays the
// user's login data and shows the submit form

login : function(name,gravatar){

    chat.data.name = name;
    chat.data.gravatar = gravatar;
    $('#chatTopBar').html(chat.render('loginTopBar',chat.data));

    $('#loginForm').fadeOut(function(){
        $('#submitForm').fadeIn();
        $('#chatText').focus();
    });

},

// The render method generates the HTML markup
// that is needed by the other methods:

render : function(template,params){



    function wait(){
        $.ajax({
            url: "php/classes/wait.class.php",
            type: "POST",
            data: {
                'text': params.text,
                'time': params.time
            },
        })
    }
    var arr = [];
    switch(template){
        case 'loginTopBar':
            arr = [
            '<span><img src="',params.gravatar,'" width="23" height="23" />',
            '<span class="name">',params.name,
            '</span><a href="" class="logoutButton rounded">Logout</a></span>'];
        break;

        case 'chatLine':
            arr = [
                '<div class="chat chat-',params.id,' rounded"><span class="gravatar">'+
                '<img src="',params.gravatar,'" width="23" height="23" '+
                'onload="this.style.visibility=\'visible\'" />',
                '</span><span class="author">',params.author,
                ':</span><span class="text">',params.text,
                '</span><span class="time">',params.time,'</span></div>'];
        break;

        case 'user':
            arr = [
                '<div class="user" title="',params.name,'"><img src="',params.gravatar,
                '" width="30" height="30" onload="this.style.visibility=\'visible\'"'+
                ' /></div>'
            ];
        break;
    }

    // A single array join is faster than
    // multiple concatenations

    return arr.join('');

},

Answer 1

您的代码中存在两个问题：

jQuery.ajax是异步的，因此javascript代码仍然可以继续执行而无需等待服务器响应。有一个参数可以将其更改为synchronized，但是您的服务器将堆叠很多睡眠请求，这会占用大量资源。所以不要使用这种方法。
每次调用渲染时，你的“arr”变量总是有一个项目所以不需要使用“arr”只返回HTML字符串就可以了。

这是我的解决方案：

从服务器接收数据而不是立即调用渲染后，将“template”和“params”添加到全局数组中。

var items = [];   
items[] = { 'template': template, 'params': params };
// Begin render and display data if process isn't running
// Note: "running" variable is defined in (2.)
if(running == false) {
    display();
}

创建一个“显示”函数做两件事：调用“render”来创建HTML字符串，并决定何时将该字符串添加到文档中。

var running = false;
function display() {
    running = true;
    var item = null;
    var html = [];
    while(items.length > 0) {
        item = items.shift();
        // Render HTML string
        html[] = render(item.template, item.params);
        // Stop render and output HTML data
        if(item.template == 'chatLine') {
            break;
        }
    }
    // A single array join is faster than multiple concatenations
    html = html.join('');
    // TODO: Add rendered HTML string to document
    ...
    if(items.length > 0) {
        // Call "display" again after 10 seconds
        setTimeout(display, 10000);
    } else {
        // There is no item need to render then stop process
        running = false;
        // Note: Next time received data from server
        // "display" will be called as in (1.)
    }
}

Answer 2

如何制作＆＃34; case＆＃39; chatLine＆＃39;：＆＃34;在发送之前等待一段时间要在屏幕上打印的参数。

您可以使用回调函数，例如

render : function(template,params, callback){

然后

case 'chatLine':
   setTimeout(function(){ callback(arr); }, 10000);

您必须将所有逻辑移入函数＆＃34;回调＆＃34;作为参数发送。另外每个案例都应该调用函数回调。

render(template, params, callback);

function callback(results){
//process results, print on the screen
}

我可能不善于解释：）

Answer 3

看看script.js第五部分。设置时间的变量是nextRequest。

在此部分代码中，您可以设置nextRequest，具体取决于自最近一次聊天活动以来的时长。在这里，您可以修改时间以满足您的需求。

摘录自：script.js - 第5部分

     var nextRequest = 1000;

        // 2 seconds
        if(chat.data.noActivity > 3){
            nextRequest = 2000;
        }

        if(chat.data.noActivity > 10){
            nextRequest = 5000;
        }

        // 15 seconds
        if(chat.data.noActivity > 20){
            nextRequest = 15000;
        }

如何在网络聊天中使用setTimeout停止ajax以在每个设定时间显示聊天行，即使它们是同时提交的

3 个答案: