0

我有一个代码正在对服务器进行 ajax 调用并在屏幕上进行一些绘图。一切正常，但执行似乎不稳定，有时我必须重新加载页面几次才能看到绘图功能的结果。绘图是通过 Processing.js 完成的。这是带有一些注释的代码，我添加了这些注释，显示了我想要代码做什么。

视图结构（它是 Rails 3.2 ）如下：

应用程序/句子/show.html.erb

    <script>

    $(document).ready(function () {
      //This calls the action in controller that queries database for new results:
      setInterval(function(){
        var idx  = "<%= @sentence.id %>";
        $.post("getstatus/", {id:idx});
        console.log("reload");
      },6000);
    });

    </script>
    <%= javascript_include_tag "pjs" %>
    <div class="container-fluid plots-field" >
    <div id="grid-system">
    <canvas id="graphsketch" data-processing-sources="/assets/pjs/graphBuilder2_2.pde"></canvas>

    <div id='node_div'></div>
    <div id='iframe_div'></div>
    <div id='comments_div'></div>
    <div id='link_to_plot'><%= link_to "Original plot", @sentence.plot %></div>
    </div>  
    </div>
    <div id="data_div"></div>

app/controllers/sentences_controller.rb <- 这里我有一个 getstatus 函数：

     def getstatus
        @sentence = Sentence.find(params[:id])
        @sentence_so_far = @sentence.get_graph.to_json.html_safe
        @sentence_test = "BBB"

            respond_to do |format|
            format.js
        end
      end

app/controllers/sentences/gestatus.js.erb <- 这是绘图发生的地方。我有一个“缓存”变量，它通过 jquery.data 保存到相应的 div 中，并与控制器的最新返回值进行比较。

    var bound = false;
    var pjs = Processing.getInstanceById("graphsketch");
    var text = <%= @sentence_so_far %>;
    var test = <%= array_or_string_for_javascript(@sentence_test)%>;

    //Added this to be able to check difference between cache and current data
    Array.prototype.diff = function(a) {
        return this.filter(function(i) {
            return !(a.indexOf(i) > -1);
        });
    };
    //Saving current state to data with 'orig' ket
    $("#data_div").data("orig", text);
    var orig = $("#data_div").data("orig");
    //Getting cache from data_div
    var cache = $("#data_div").data("cache");
    //If I have the cache, get the difference and get assign it to text variable, if there is no difference, means I already have what I need on screen
    if (cache) {
        var dif = cache.diff(orig);
        text = dif;
    }
    //If cache is different from what I had before, draw stuff with text.
    if (cache != orig) {
        pjs.update(text);
    }
    //Save current text to cache.
    $("#data_div").data("cache", text);
    //This allows Processing.js to interact with Javascript
    function bindJavascript() {
        var pjs = Processing.getInstanceById("graphsketch");
        if (pjs != null) {
            pjs.bindJavascript(this);
            bound = true;
        }
        if (!bound) setTimeout(bindJavascript, 250);
    }
    bindJavascript();
    //This function is getting called form within Processing.js and works fine.. 
    function nodeName(name) {

        $.post("/nodes/this_node/", {id: name});    
    //  console.log(name);

    }

所以结果是有时我实际上可以看到 pjs.update(text) 的结果，但有时什么也没画。从服务器控制台我可以看到控制器操作工作正常，并且总是从模型中返回我需要的东西。

编辑：这是 HTML 页面的“显示源”，如果有帮助的话..

    <!DOCTYPE html>
    <html lang="en">
      <head>

    <link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/docs.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/style.css?body=1" media="screen" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css'>
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs/lib/toxiclibs.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs/lib/toxiclibs.min.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs/processing.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

    </head>
<body>
            <script>

$(document).ready(function () {
  setInterval(function(){
    var idx  = "5";
    $.post("getstatus/", {id:idx});
    console.log("reload");
  },6000);
});

</script>
<script src="/assets/pjs.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs/lib/toxiclibs.js?body=1" type="text/javascript"></script>
<script src="/assets/pjs/processing.js?body=1" type="text/javascript"></script>
<div class="container-fluid plots-field" >
<div id="grid-system">
<canvas id="graphsketch" data-processing-sources="/assets/pjs/graphBuilder2_2.pde"></canvas>

<div id='node_div'></div>
<div id='iframe_div'></div>
<div id='comments_div'></div>
<div id='link_to_plot'><a href="/plots/60">Original plot</a></div>
</div>  
</div>
<div id="data_div"></div>

<div id="video_grid" class="row"></div>
</body>


</html>

非常感谢任何输入。如果我可以提供更多信息，请告诉我。

谢谢！

4

0 回答 0