如何在不使用 on 'Click' 的情况下更新函数的数据

Question

我一直在用这个代码做一个坦克的数据可视化，效果很好只是我想每2秒更新一次，我让它调用了只包含一个坦克的页面，但它确实如此整个动画一遍又一遍，它看起来不稳定，我想更新它而不必更新整个页面，也许改变“.on('click', function(event) { $(this).waterTank(Math.floor(Math.random() * 100) + 0 );" 但是我不知道是否可以每 2 秒自动执行一次。这段代码可以发现在demo里https://github.com/AppeonixCreativeLab/waterTank，他点一下改数据，但是没有资料说怎么自动改，希望大神帮忙

<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", "root", "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>

Answer 1

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

然后，加载初始页面后，您可以设置 2 秒的超时并再次调用该函数，如此继续。

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

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

因为我无法访问您的数据库，所以我输入了几行代码来发送 0 到 100 之间的随机值，这样您就可以看到水箱液位的变化。同样在 JS 中，L 值是用 dato 更新的，但它应该是某种升值而不是 % 吗？也许需要发送两个值，% fullness 和实际体积？如果是这样，那么将它们作为 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", "root", "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>

如何在不使用 on 'Click' 的情况下更新函数的数据

How to update the data of a function without using on 'Click'

javascript

jquery

data-visualization

auto-update