對不起，我是新手。我正在嘗試實時渲染資料庫中的資料，通過定時器更新變數。然后我將變數匯入到SVG渲染中，但是當我在網頁中添加Timer時，網頁就不行了，也不會報錯，請問我的代碼怎么除錯呢？
索引.cshtml
@model IEnumerable<MPU_02.Models.Mpu>
@{
ViewData["Title"] = "Index";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" id="svg">
<g>
<title>Layer 1</title>
<rect stroke-width="5" rx="20" id="svg_1" height="590" width="590" y="5" x="5" stroke="#000" fill="#999999"/>
<ellipse ry="150" rx="150" id="svg_2" cy="256" cx="256" stroke-width="5" stroke="#000" fill="#7fff00"/>
<rect rx="10" id="svg_3" height="40" width="300" y="480" x="111" stroke-width="5" stroke="#000" fill="#7fff00"/>
<rect rx="10" id="svg_4" height="300" width="40" y="111" x="480" stroke-width="5" stroke="#000" fill="#7fff00"/>
<line opacity="0.5" id="svg_8" y2="211" x2="520" y1="211" x1="480" stroke-width="3" stroke="#000" fill="none"/>
<line opacity="0.5" id="svg_9" y2="311" x2="520" y1="311" x1="480" stroke-width="3" stroke="#000" fill="none"/>
<line opacity="0.5" id="svg_10" y2="520" x2="211" y1="480" x1="211" stroke-width="3" stroke="#000" fill="none"/>
<line opacity="0.5" id="svg_11" y2="520" x2="311" y1="480" x1="311" stroke-width="3" stroke="#000" fill="none"/>
<line opacity="0.5" id="svg_12" y2="256" x2="406" y1="256" x1="106" stroke-width="3" stroke="#000" fill="none"/>
<line opacity="0.5" id="svg_13" y2="406" x2="256" y1="106" x1="256" stroke-width="3" stroke="#000" fill="none"/>
<ellipse opacity="0.8" ry="30" rx="30" id="c" cy="256" cx="256" stroke="#BBBBBB" fill="#00ff00"/>
<ellipse opacity="0.8" ry="20" rx="30" id="h" cy="500" cx="256" stroke="#999999" fill="#7fff00"/>
<ellipse opacity="0.8" ry="30" rx="20" id="v" cy="256" cx="500" stroke="#999999" fill="#7fff00"/>
</g>
</svg>
</body>
</html>
@{
var timer = new PeriodicTimer(TimeSpan.FromSeconds(5));
double H=0.0;
double V=0.0;
while (await timer.WaitForNextTickAsync())
{
H = Model.LastOrDefault().Ax;
V = Model.LastOrDefault().Ay;
}
}
<script>
function fakeData(){
return {h:@H , v:@V*-1}
}
function changePos(){
const c = document.getElementById("c")
const h = document.getElementById("h")
const v = document.getElementById("v")
console.log(c, h, v)
const data = fakeData()
var transformAttrX = 'translate(' data.h * 150 ',0)';
var transformAttrY = 'translate(0,' data.v * 150 ')';
var transformAttrXY = 'translate(' data.h * 150 "," data.v * 150 ')';
c.setAttribute('transform', transformAttrXY);
h.setAttribute('transform', transformAttrX);
v.setAttribute('transform', transformAttrY);
}
setInterval(fakeData,2000)
setInterval(changePos,3000)
</script>
Mpu.cs
using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;
using MongoDB.Bson.Serialization.IdGenerators;
namespace MPU_02.Models
{
public class Mpu
{
[BsonRepresentation(BsonType.ObjectId)]
public string? Id { get; set; }
[BsonRepresentation(BsonType.Double, AllowTruncation = true)]
public double Yaw { get; set; }
public double Pitch { get; set; }
public double Roll { get; set; }
public double Ax { get; set; }
public double Ay { get; set; }
public double Az { get; set; }
public double Gx { get; set; }
public double Gy { get; set; }
public double Gz { get; set; }
public double Mx { get; set; }
public double My { get; set; }
public double Mz { get; set; }
public double Temp { get; set; }
}
}
uj5u.com熱心網友回復：
"The web page will not work, and there will be no errors"
由于您的這行代碼，這將不起作用：
while (await timer.WaitForNextTickAsync())它將像無限回圈一樣作業并繼續回圈，最終您的HTMLandJavascipt不會按預期執行。
"how can I debug my code?"
對于
C#代碼，您可以像我們通常除錯C#代碼的方式一樣進行除錯，如下圖所示：
Note:
如果你擺脫你的代碼，while (await timer.WaitForNextTickAsync())那么它會像下面這樣作業：
我從您的
Javascript代碼中得到的另一個問題是，您正在呼叫fakeData()并changePos()運行，setInterval但您正在傳遞我認為它應該喜歡的function這樣 的東西。setInterval(fakeData,2000)setInterval(fakeData(),2000)
希望它能幫助您相應地除錯代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/426925.html
標籤：javascript asp.net 核心 svg 剃刀 .net-6.0