如何避免自动刷新后闪烁

Question

您能告诉我如何在自动刷新后停止在画布上绘制的图像闪烁。 这是我的代码

 <script>
  setTimeout(data1, 0);
  function data1(){
 for(var i=0;i<data.length;i++)
 {
   var canvas=document.getElementById('map'+id);
   context=canvas.getContext("2d");
   context.clearRect(0,0,canvas.width,canvas.height);
   console.log(JSON.stringify(response[0][3])+"Helllooooo");
   $.ajax({
   url : "/getData?id="+data[i][3],
   type : "GET",
   data : null,
   datatype : "JSON",
   success : function(response, textStatus, jqXHR) 
   { 
      for(var j=0;j<response[0].length;j++)
      {
          console.log(JSON.stringify(response[0][j]+"Hello"));
      }
      console.log(i+" "+response)
      if(response[0][7]=="1")
      {
          console.log("Status 1");
          context.drawImage(image_red, response[0][1], response[0][2]); 
      }
      if(response[0][7]=="2")
      {
          console.log("Status 2");
          context.drawImage(image_green,response[0][1],response[0][2]);
      }
  }
 });
 }
}
setInterval(data1,5000);
}

在上面的代码中，我在自动刷新后开始闪烁。请帮助我。

感谢和问候， 圣战者阿提布汗

Answer 1

您必须将 clearRect 调用放在成功回调中。您看到的闪烁是由于在重绘之前清除上下文方式引起的。通过将其放入成功回调中，它将发生在同一个微任务中，因此不会出现闪烁。