Javascript 如何快速刷新HTML元素？_Javascript_Python_Google App Engine

Javascript 如何快速刷新HTML元素？

javascript python google-app-engine

Javascript 如何快速刷新HTML元素？,javascript,python,google-app-engine,Javascript,Python,Google App Engine,我确信我在这里做了一些愚蠢的事情，但我只是尝试学习如何将内容从服务器动态推送到客户端的套接字/通道。这是我的服务器端代码，每秒推送一次随机值： import datetime import webapp2 import jinja2 import os import json import logging from google.appengine.api import channel import random import time template_env = jinja2.Environ

我确信我在这里做了一些愚蠢的事情，但我只是尝试学习如何将内容从服务器动态推送到客户端的套接字/通道。这是我的服务器端代码，每秒推送一次随机值：

import datetime
import webapp2
import jinja2
import os
import json
import logging
from google.appengine.api import channel
import random
import time
template_env = jinja2.Environment(loader=jinja2.FileSystemLoader(os.getcwd()))

timestamp = unicode(datetime.datetime.now())
class MainPage(webapp2.RequestHandler):
    def get(self):
        if self.request.get('query'):
        # request to get data
            while True:
                random_num = random.randrange(80,90)
                logging.info(random_num)
                channel.send_message(timestamp,str(random_num))
                time.sleep(1)

        token = channel.create_channel(timestamp)
        context = {
            'token': token, 
        }
        template = template_env.get_template('home.html')
        self.response.out.write(template.render(context))
application = webapp2.WSGIApplication([('/', MainPage)],debug=True)

以下是我的HTML/javascript：

<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
    <button type="button" onclick="createConnection()">Create Connection</button>
    <button type="button" onclick="startStream()">Start Data Stream</button>
    <div id="connectionalive"></div>
    <div id="value"></div>
<script>
function createConnection() {
    channel = new goog.appengine.Channel('{{ token }}');
    socket = channel.open();
    //socket.onopen = onOpened;
    socket.onmessage = displayData;
    //socket.onerror = onError;
    //socket.onclose = onClose;
    parseResponse()
}
function displayData(msg) {
    console.log("received message"); 
    $("#value").html("<p style='font-family: Helvetica, sans-serif; color: red; font-size: 26px;'>"+msg.data+"</p>");
    }
function parseResponse() { 
        $("#connectionalive").html("<p style='font-family: Helvetica, sans-serif; color: black; font-size: 14px;'>Connection Alive</p>");
        }
function startStream() { 

    $.ajax('/', {
        type: 'GET',
        async: false,
        data: {
        query: 'startstream',
    }, 
    success: function() { logging.info("stream started") }
}); 

} 
</script>
</body>


创建连接
启动数据流
函数createConnection（）{
channel=new goog.appengine.channel（'{{token}}'）；
socket=channel.open（）；
//socket.onopen=onOpened；
socket.onmessage=显示数据；
//socket.onerror=onerror；
//socket.onclose=onclose；
parseResponse（）
}
函数显示数据（msg）{
控制台日志（“收到的消息”）；
$（“#value”）.html（“+msg.data+””；
}
函数parseResponse（）{
$（“#connectionalive”）.html（Connection-Alive）；
}
函数startStream（）{
$.ajax（“/”{
键入：“GET”，
async:false，
数据：{
查询：“startstream”，
}, 
成功：函数（）{logging.info（“流已启动”）}
}); 
}

代码很粗糙，我只是想看看我能每秒发送一次新值并在我的网站上更新它。但是，当我单击“启动数据流”时，我的浏览器挂起，虽然看起来我的后端服务器正在通过通道发送数据，但浏览器不会更新

div

。当我停止

while

循环时，浏览器会更新，但只更新一次。。它没有像我预期的那样显示每秒更新一次的值流。这里有我遗漏的东西吗？谢谢

我在您发布的代码中没有看到while循环，但是如果您使用来自浏览器的同步ajax调用执行while循环，那么您永远不会给浏览器重新绘制的机会

更好的实现是将ajax调用配置为异步，启动ajax调用，然后在调用完成时（例如调用完成处理程序），可以更新页面并启动下一个ajax调用。然后，页面将在异步ajax调用期间更新

繁忙循环和同步ajax调用在浏览器中都是坏事。浏览器必须返回自己的事件循环，以便重新绘制、响应事件以及执行其他保持浏览器响应的操作。代码通常通过setTimeout（）或setInterval（）在浏览器中重复，这使您可以安排一些代码在将来运行若干毫秒，在此之前，浏览器可以处理自己的内部管理（重绘、事件处理等）。在您的例子中，您已经可以通过异步ajax调用获得自然的计时节奏。启动异步ajax调用，返回事件循环，以便浏览器可以进行处理。然后，当ajax调用的完成函数被触发时，您将处理结果并开始下一个ajax调用。

我认为它只会调用一次，您需要一次又一次的调用时间。