setinterval 相关问题

机器学习数据仪表板 <!doctype html> <html> <head> <title>Machine Learning Data Dashboard</title> <link rel="stylesheet" href='../static/style.css'/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> body { text-align: center; } #g1, #g2, #g3, #g4 { width: 350px; height: 260px; display: inline-block; margin: 4em; } </style> </head> <body> <h1>Machine Learning Data Dashboard</h1> <div id="g1"></div> <div id="g2"></div> <div id="g3"></div> <div id="g4"></div> <hr> <h3> Last Sensors Reading: {{ time }} ==> <a href="/"class="button">REFRESH</a></h3> <hr> <h3> HISTORICAL DATA </h3> <p> Enter number of samples to retrieve: <form method="POST"> <input name="numSamples" value= {{numSamples}}> <input type="submit"> </form></p> <hr> <img src="/plot/temp" alt="Image Placeholder" width="22%"> <img src="/plot/hum" alt="Image Placeholder" width="22%"> <img src="/plot/nois" alt="Image Placeholder" width="22%"> <img src="/plot/pres" alt="Image Placeholder" width="22%"> <p> @2018 Developed by MJRoBot.org</p> <script src="../static/raphael-2.1.4.min.js"></script> <script src="../static/justgage.js"></script> <script> var g1, g2, g3, g4; document.addEventListener("DOMContentLoaded", function(event) { g1 = new JustGage({ id: "g1", value: {{temp}}, valueFontColor: "yellow", titleFontColor: "yellow", pointer: true, min: -10, max: 50, pointer: true, pointerOptions: { stroke_width: -1, stroke_linecap: 'round' }, title: "Temperature", label: "°C" }); g2 = new JustGage({ id: "g2", value: {{hum}}, valueFontColor: "yellow", titleFontColor: "yellow", donut: true, pointer: true, gaugeWidthScale: 0.4, min: 0, max: 100, title: "Humidity", label: "%" }); g3 = new JustGage({ id: "g3", value: {{nois}}, valueFontColor: "yellow", titleFontColor: "yellow", donut: true, pointer: true, gaugeWidthScale: 0.4, min: 0, max: 100, title: "Noise", label: "dB" }); g4 = new JustGage({ id: "g4", value: {{pres}}, valueFontColor: "yellow", titleFontColor: "yellow", min: 0, max: 100, pointer: true, pointerOptions: { toplength: 8, bottomlength: -20, bottomwidth: 6, stroke_width: 3, stroke_linecap: 'round' }, gaugeWidthScale: 0.1, title: "Pressure", label: "Pa" }); setInterval(function() { g1.refresh(); g2.refresh; g3.refresh; g4.refresh; }, 2500); }); </script> </body> </html> 我正在尝试让项目中的量具值自动更新，而不是通过当前单击“刷新”按钮来更新。有一个 Justgage 示例显示自动刷新，如下代码： setInterval(function() { g1.refresh(getRandomInt(50, 100)); g2.refresh(getRandomInt(50, 100)); g3.refresh(getRandomInt(0, 50)); g4.refresh(getRandomInt(0, 50)); }, 2500); 这里使用随机数，但我的4个变量是通过数据库的数据更新的，所以我不需要随机部分。任何人都可以建议我应该如何编写这部分代码来自动刷新量具？设置间隔？设置超时？还是需要Ajax？我的Javascript很差，谢谢。刷新仪表的最佳方法是使用 FCM (firebase)。 https://firebase.google.com/docs/cloud-messaging?hl=pt-br 在每次更改中，您都不会向 Firebase 发送通知，当返回响应 Firebase 时，您会调用该函数。如果您使用 PHP，您可以使用curl 发送通知。喜欢： public function sendNotification($title, $body, $token) { $url = 'https://fcm.googleapis.com/fcm/send'; $headers = [ 'Authorization: key=GET_THE_AUTORIZATION_AND_PUT_HERE', 'Content-type: application/json' ]; $notification = [ 'title' => $title, 'body' => $body ]; $request = [ 'notification' => $notification, "registration_ids" => array($token) ]; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($request)); $res = curl_exec($ch); return $res; curl_close($ch); } 在 Firebase 中注册后，您将获取信息并输入代码 js。应该是这样的： // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional var firebaseConfig = { apiKey: "this information is filled by firebase", authDomain: "this information is filled by firebase", projectId: "this information is filled by firebase", storageBucket: "this information is filled by firebase", messagingSenderId: "this information is filled by firebase", appId: "this information is filled by firebase", measurementId: "this information is filled by firebase" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); let token; const fcm = firebase.messaging(); fcm.getToken({ vapidkey: 'IN HERE YOU PUT KEY PAIR' // yout get in settings > cloudmessaging - in the firebase }).then((currentToken) => { if (currentToken) { token = currentToken; console.log(currentToken); } else { // Show permission request UI console.log('No registration token available. Request permission to generate one.'); } }).catch((err) => { console.log('An error occurred while retrieving token. ', err); }); fcm.onMessage((data) => { // in here you call g1.refresh(getRandomInt(50, 100)); g2.refresh(getRandomInt(50, 100)); g3.refresh(getRandomInt(0, 50)); g4.refresh(getRandomInt(0, 50)); } para poder cambiar el valor lo tenes en var g4 = 新 JustGage({ id: 'g4', /* en el plc 变量名称 / value: 70, / aca se coloca la variable del plc, en un s7 /// value: ':="nombre_de_la_variable":', /////*/

javascript html ajax setinterval justgage

回答 2 投票 0

setInterval 不使用 useState 变量的更新值

这是一个useEffect函数，shopId更新一次，所以我假设它运行一次。即使我调用 setOrder 函数，订单变量也不会被识别为在这里更新，它会在其他地方更新...

reactjs react-hooks setinterval

回答 1 投票 0

setTimeout() 和 setInterval() 函数是异步的吗？

我读到 setTimeout() 和 setInterval() 用于模仿异步行为。但我不知道他们是不是真的。

javascript asynchronous settimeout setinterval

回答 3 投票 0

Chrome 开发工具中的监听器性能分析结果

我一直在使用 Chrome 开发工具分析 React 应用程序，我发现监听器数量呈线性增加。看看下面的截图。听众是橙色的。我缩小了范围...