如何在不使用“点击”

问题描述

我一直在使用这段代码来进行坦克的数据可视化，它工作得很好，只是我想每 2 秒更新一次，我让它调用只包含一个坦克的页面，但它完成了整个过程动画一遍又一遍，看起来不稳定，我想更新它而不必更新整个页面，也许更改“.on('click',function(event) { $(this).waterTank(Math.floor(Math.random() * 100) + 0 );" 但我不知道是否可以每 2 秒自动执行一次。此代码可以在 {{ 3}} 在demo中，他是通过click改变数据的，但是没有信息如何自动使它，我希望有人可以帮助

<html>
<head>
    <Meta charset="UTF-8">
    <title>3D Water Tank</title>
</head>
<body>
<style>
.wrap{
    font-family: Roboto;
    text-align: center;
}
.tank{
    margin:0 50px;
    display: inline-block;
}
body{
    /*background: #eee;*/
    margin: 0;
}
</style>
<div class="wrap">
    <div class="tank waterTankHere1"></div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="./waterTank.js"></script>
<script>

$(document).ready(function() {

$('.waterTankHere1').waterTank({
    width: 420,height: 360,color: '#8bd0ec',level: 83
}).on('click',function(event) {
    $(this).waterTank(Math.floor(Math.random() * 100) + 0 );
});

});

我想使用的代码是用来自 MysqL 的数据更新，就像这样：

<?PHP  
session_start();
 //$connexion = MysqLi_connect("localhost:3306","root","","Grdxf");
$connexion = MysqLi_connect("localhost:3306","123456","telemetic");
 $seleccion = "SELECT an1 FROM reportes where Grd_id=".$_SESSION['Grd'].";  ";  
 $resultado = MysqLi_query($connexion,$seleccion);  
$fila = MysqLi_fetch_array($resultado);
 $dato=3*((($fila["an1"]/100)-4)/16);
?> 
<html>
<head>
    <Meta charset="UTF-8">
    <title>Tanque de agua</title>
    <script src="Javascriptsweb/jquery.min.js"></script>
<script src="Javascriptsweb/d3tanque3.js"></script>
</head>
<body>
<style>


.divTablata{ display: table; }
.divcedata{ background-color: beige; background: beige  }
            @font-face{
 font-family:'Digital';
 src: url('CSSweb/loopy/LOOPY_IT.ttf');
}

</style>
<div class="divTablata">
<div class="divTableRow">
<div class="divceldata tanque1"></div></div>
<div class="divTableRow">
<div class="divTableCella"><h2 style="font-family:'Digital'; color:red;" ><?PHP echo $dato?> L</h2></div></div>
</div>
<script>
    $(document).ready(function() {
        $('.tanque1').waterTank({
            width: 100,height:100,color: '#72bddb',//color de nuestro liquido
            level:  <?PHP echo $dato?>,tamano:3// tamaño tanque
    });

});

</script>
</body>
</html>

解决方法

你需要用新的dato值将坦克绘制成一个函数。还要添加一点，以便它进行 AJAX 调用以获取 dato 的下一个值。

然后，一旦您加载了初始页面，您可以将超时设置为 2 秒并再次调用该函数，然后继续。

注意：我不推荐 setInterval 以防万一出现问题并且花费太长时间。如果您每次都使用 setTimeout ，那么您就会知道您没有任何其他请求等待服务，并且您不会陷入困境。只有在您收到回复时才会设置超时。在现实生活中，您需要仔细考虑如果后端停止响应或发送垃圾数据该怎么办。

页面初始加载后，2 秒后调用相同的 url 但参数 dato=true 后端 PHP 查看是否设置，如果设置，则不会重新发送整个它只是发送它认为 dato 的当前值是什么。

因为我无法访问您的数据库，所以我输入了几行代码来发送 0 到 100 之间的随机值，以便您可以看到油箱液位的变化。同样在 JS 中，L 值用 dato 更新，但这应该是某种升值而不是 % 吗？也许需要发送两个值，% 丰满度和实际音量？如果是这样，那么将它们作为 JSON 发送可能就是答案。

这是更改后的后端代码。它使用 jquery 的 AJAX 方法（如果您需要，它确实有一个 JSON 选项）。在短时间内，此功能将在 tanktemp 上提供，以便您可以立即看到它的运行情况。

<?php
// REMOVE THE COMMENT FROM AROUND THIS NEXT 7 LINES OF PHP FOR PRODUCTION VERSION
/* 
session_start();
 //$connexion = mysqli_connect("localhost:3306","root","","grdxf");
$connexion = mysqli_connect("localhost:3306","123456","telemetic");
 $seleccion = "SELECT an1 FROM reportes where grd_id=".$_SESSION['GRD'].";  ";  
 $resultado = mysqli_query($connexion,$seleccion);  
$fila = mysqli_fetch_array($resultado);
 $dato=3*((($fila["an1"]/100)-4)/16);
*/
// REMOVE THE NEXT TWO LINES OF PHP FOR PRODUCTION VERSION -->
  $dato = 10;
  if ($_GET['dato']) { echo rand(0,100); die();}
?>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tanque de agua</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="waterTank.js"></script>
</head>
<body>
<style>


.divTablata{ display: table; }
.divcedata{ background-color: beige; background: beige  }
            @font-face{
 font-family:'Digital';
 src: url('CSSweb/loopy/LOOPY_IT.ttf');
}

</style>
<div class="divTablata">
<div class="divTableRow">
<div class="divceldata tanque1"></div></div>
<div class="divTableRow">
<div class="divTableCella"><h2 style="font-family:'Digital'; color:red;" ><?php echo $dato?> L</h2></div></div>
</div>
<script>

let dato = <?php echo $dato?>;
    $(document).ready(showTank);
function showTank(){
    document.querySelector('.divTableCella h2').innerHTML = dato + ' L';
    $('.tanque1').waterTank({
            width: 100,height:100,color: '#72bddb',//color de nuestro liquido
            level:  dato,tamano:3// tamaño tanque
    });
    $.ajax({
    url: '?dato=true',type: "GET",success: function (data) {
        dato = data;
        setTimeout(showTank,2000);
    },error: function (error) { 
        alert('oh dear - please see console');
        console.log(`Error ${error}`);
    }
});

}

</script>
</body>
</html>

auto-update data-visualization javascript jquery