极客观点
项目管理
HarmonyOS
1、问题背景是一个简单的关于canvas画一个曲线的页面，我需要在某个时候停止画布的绘制动作，其中使用了定时器，判断条件是变量var i 的值。当i达到预定值时，清除定时器。用if进行判断的时，绘制完成之后，刷新页面可以立即重新绘制。可是使用while判断时，页面刷新一直是无响应。
2、源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas demo-01</title>
</head>
<body>
<canvas id="drawing" width="1000" height="500">This is a canvas</canvas>
</body>
<script type="text/javascript">
var drawing = document.getElementById("drawing");
if(drawing.getContext){
//获取canvas的上下文
var context = drawing.getContext('2d');
//到现在为止canvas里面还是没有东西的
//如果需要在canvas中画东西获取上下文之后，进行下面的操作
context.moveTo(0,250);
context.strokeRect(0,0,1000,500);
//------------开始--------------
var timer = window.setInterval(function(){
run(context);
},100);
//i:表示横坐标
var i = 0;
function run(ctx){
//条件限制---使用if没毛病
// if(i==50){
// console.log("lllll");
// window.clearInterval(timer);
// }
//限制条件－－－使用while时刷新页面无响应
while(i==160){
window.clearInterval(timer);
}
var lon = 3*i;
var lat = 250+Math.sin(i/10)*100;
ctx.lineTo(lon,lat);
ctx.strokeStyle = "#0000ff";
ctx.stroke();
ctx.fillStyle = "#0000ff";
i = i+1;
}
//-------------结束----------
}else{
console.log("Browser is not supported!");
}
</script>
</html>
3、在我的理解里if和while在我的这段代码中功能是一样的，怎么会有这样的问题存在。平时一般都是用if比较多，不知while是否有什么坑，希望大家指点
在while里面加一个break，不然当i等于160的时候，就是死循环了，所以页面才会挂掉