Question

我有一个代码正在对服务器进行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＆lt; - 这里我有一个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＆lt; - 这是绘图发生的地方。我有一个＆＃34;缓存＆＃34;变量，通过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（文本）的结果，但有时候什么都没画。从服务器控制台我可以看到控制器动作正常工作，并始终从模型中返回我需要的内容。

编辑：这是＆＃34; show source＆＃34; 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>

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

谢谢！

不稳定执行ajax调用/ Javascript，代码流/逻辑问题。

0 个答案: