如何在自动刷新后避免闪烁

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); 
} 

在上面的代码中我得到自动刷新后闪烁。请帮助我。

感谢和问候， 穆贾希德Ateeb汗

Answer 1

你必须把clearRect呼叫insude成功回调。您看到的闪烁是在重绘它之前清除上下文的方式引起的。通过将它放入成功回调中，它将发生在相同的微任务中，因此不会看到闪烁。