SetInterval 在循环中与 canvas.js 一起使用时也不起作用答案

【问题标题】：SetInterval not working while using with canvas.js also within loopSetInterval 在循环中与 canvas.js 一起使用时也不起作用
【发布时间】：2023-04-01 05:15:01
【问题描述】：

<?php 
 $no1=0;
foreach($location_data as $last_data){ 
                      
        if($location[0]->depth_unit=="meter"){
          $depth_drilled=($last_data->end_depth - $last_data->start_depth)*3.28;
          $acceptable_loss=((12.25*12.25)/1029.4*($depth_drilled)/6.28);
      }
      else{
          $depth_drilled=($last_data->end_depth - $last_data->start_depth);
          $acceptable_loss=(12.25*12.25)/1029.4*($depth_drilled);
      }
      ?>
      setInterval(function(){
  <?php  if($last_data->shaker_loss_value < $acceptable_loss ){ ?>
    chart.options.data[3].dataPoints[<?php echo $no1; ?>].markerColor = "transparent";
 <?php } else { ?>
    chart.options.data[3].dataPoints[<?php echo $no1; ?>].markerColor = "red";
      chart.options.data[3].dataPoints[<?php echo $no1; ?>].markerType = "triangle";
      <?php  } ?>
 chart.render();
 },<?php echo $no1; ?> * 1000);
 <?php
 $no1++;
}  ?>

上面是我在 canvas.js 中实现的代码，用于闪烁标记，但它在加载时只闪烁一次，它应该一直闪烁，运气好

 setInterval(function(){
          chart.options.data[3].dataPoints[0].markerColor = "red";
          chart.options.data[3].dataPoints[0].markerType = "triangle";
           chart.render();
     },0 * 1000);
           setInterval(function(){
          chart.options.data[3].dataPoints[1].markerColor = "red";
          chart.options.data[3].dataPoints[1].markerType = "triangle";
           chart.render();
     },1 * 1000);
           setInterval(function(){
          chart.options.data[3].dataPoints[2].markerColor = "red";
          chart.options.data[3].dataPoints[2].markerType = "triangle";
           chart.render();
     },2 * 1000);
           setInterval(function(){
          chart.options.data[3].dataPoints[3].markerColor = "red";
          chart.options.data[3].dataPoints[3].markerType = "triangle";
           chart.render();
     },3 * 1000);
           setInterval(function(){
          chart.options.data[3].dataPoints[4].markerColor = "red";
          chart.options.data[3].dataPoints[4].markerType = "triangle";
           chart.render();
     },4 * 1000);
           setInterval(function(){
          chart.options.data[3].dataPoints[5].markerColor = "red";
          chart.options.data[3].dataPoints[5].markerType = "triangle";
           chart.render();
     },5 * 1000);
           setInterval(function(){
          chart.options.data[3].dataPoints[6].markerColor = "red";
          chart.options.data[3].dataPoints[6].markerType = "triangle";
           chart.render();
     },6 * 1000);
           setInterval(function(){
          chart.options.data[3].dataPoints[7].markerColor = "red";
          chart.options.data[3].dataPoints[7].markerType = "triangle";
           chart.render();
     },7 * 1000);
           setInterval(function(){
          chart.options.data[3].dataPoints[8].markerColor = "red";
          chart.options.data[3].dataPoints[8].markerType = "triangle";
           chart.render();
     },8 * 1000);
           setInterval(function(){
          chart.options.data[3].dataPoints[9].markerColor = "red";
          chart.options.data[3].dataPoints[9].markerType = "triangle";
           chart.render();
     },9 * 1000);

这就是我从源头得到的查看源代码：http://dssecosystem.com/index.php/account/client_dashboard_new/1 以上是您可以在第 28847 行查看我的代码的链接

【问题讨论】：

一开始，如果你要使用一个区间，你只需要一个方法调用，现在你有多个区间连续触发。其次，没有任何东西使标记闪烁，所有间隔都为所有标记设置相同的颜色和类型。从中删除服务器端代码，并尝试纯用 JS 编写代码。
好的，我已经更改为单个函数并在损失中调用该函数并传递值

标签： javascript canvasjs

【解决方案1】：

<?php 
 $no1=0;
foreach($location_data as $last_data){ 
                      
        if($location[0]->depth_unit=="meter"){
          $depth_drilled=($last_data->end_depth - $last_data->start_depth)*3.28;
          $acceptable_loss=((12.25*12.25)/1029.4*($depth_drilled)/6.28);
      }
      else{
          $depth_drilled=($last_data->end_depth - $last_data->start_depth);
          $acceptable_loss=(12.25*12.25)/1029.4*($depth_drilled);
      }
      ?>
      callFun(<?php echo $last_data->shaker_loss_value ?>,<?php echo $acceptable_loss ?>,<?php echo $no1 ?>);
      
   
 <?php
 $no1++;
}  ?>

function callFun(shaker_loss_val,acceptable_los_val,n){
    setInterval(function(){
   if(shaker_loss_val < acceptable_los_val ){
    chart.options.data[3].dataPoints[n].markerColor = "transparent";
  } else { 
    chart.options.data[3].dataPoints[n].markerColor = "red";
      chart.options.data[3].dataPoints[n].markerType = "triangle";
      }
 chart.render();
 },500);   
}

它仍然只闪烁一次，源链接是 https://jsfiddle.net/kj87p5cL/

【讨论】：