Question

我有一个小型聊天实现，它使用下面的Message模型。在index操作中，我以“聊天区”形式显示所有消息。问题是，我想开始一个后台任务，每隔X秒轮询服务器一次新消息。我怎么能这样做，让我的JS不引人注目？我不想在我的index.html.erb中使用内联JS，我不希望在我所在的每个页面上评估轮询代码。

Answer 1

使用像mootools或jquery这样的库最容易。在domready / document.ready上，您应该检查给定的类，例如“chat-area-container”。如果找到，您可以构建一个新的<script>标记并将其注入DOM，以便包含特定于聊天区域的JavaScript。这样，它不会加载到每个页面上。 “聊天区域容器”的结构可以隐藏或显示加载消息，脚本初始化后可以删除。

在动态创建的<script>标记上，添加onLoad事件。脚本加载完成后，您可以在onLoad事件中调用任何初始化函数。

使用此方法，您可以逐步增强您的页面 - 没有javascript的用户将看到带有加载消息的无效聊天区域（因为它无论如何都无法运行），或者如果您最初隐藏它们，根本就没有一个聊天区域会更加明智。此外，通过使用动态脚本标记，onLoad事件“伪线程”初始化主javascript程序堆栈。

Answer 2

要在固定间隔上设置轮询，请使用setInterval或setTimeout。这是一个例子，使用jQuery并猜测服务器的ajax接口可能是什么样子：

$(function() {
    // Look for the chat area by its element id.
    var chat = $('#chat-area');
    var lastPoll = 0;

    function poll() {
        $.getJSON('/messages', { since: lastPoll }, function(data) {
            // Imagining that data is a list of message objects...
            $.each(data, function(i, message) {
                // Create a paragraph element to display each message.
                var m = $('<p/>', {
                    'class': 'chat-message',
                    text: message.author +': '+ message.text;
                });

                chat.append(m);
            });                    
        });

        // Schedules the function to run again in 1000 milliseconds.
        setTimeout(poll, 1000);

        lastPoll = (new Date()).getTime();
    }

    // Starts the polling process if the chat area exists.
    if (chat.length > 0) {
        poll();
    }
});

如何设置JS在后台运行，同时保持不引人注目？

2 个答案: