javascript - 加载功能导致网站停滞

Question

当我尝试通过按“s”然后按“l”来“加载”“已保存的绘图”时，会导致浏览器停止响应。我认为这是因为所有的 while 循环(第 47 行及更高行)，但即使是我添加的 setTimeout 也没有帮助。非常感谢您的帮助。该脚本嵌入在我的网站 ( https://veryblankwhitepaper.weebly.com/with-canvas.html ) 中:

var canvas = document.getElementById("draw");
var context = canvas.getContext("2d"); 
var color = "#0000ff";
var xs = [];
var ys = [];
var colors = [];
var sizes = [];
var loadDrawing = function(){
    for(var p = 0; p < xs.length; p++){
        setTimeout(function(){
            context.beginPath();
            context.moveTo(xs[p], ys[p]);
            context.fillStyle = colors[p];
            context.arc(xs[p] - (sizes[p] / 2), ys[p] - (sizes[p] / 2), sizes[p], 0, Math.PI * 2);
            context.fill();
            context.closePath();
        },10);
    }
    alert("done!");
}
var isMouseDown = false; var thickness = 4;
function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
} 
window.onkeyup = function(e){
    e = e || e.which; 
    var key = e.which || e.keycode; 
    if(key === 65){
    color = prompt("Change the color");
    } 
    if(key === 76){
        if(confirm("Do you want to load a saved picture?") === true){
            var load = prompt("What file do you want to load","insert saved file name here");
            context.clearRect(0,0,100000,100000);
            alert("please wait. this may take some time depending on how big the drawing is..");
            xs = [];
            ys = [];
            colors = [];
            sizes = [];
            var int = 0;
            var str = "";
            while(localStorage[load + "xs"][int] !== ""){
                while(localStorage[load + "xs"][int] !== ","){
                    setTimeout(function(){
                        str = str + localStorage[load + "xs"][int];
                        int = int + 1;
                    },10);
                }
                int = int + 1; 
                xs.push(str);
                str = "";
            }
            int = 0;
            while(localStorage[load + "ys"][int] !== ""){
                while(localStorage[load + "ys"][int] !== ","){
                    setTimeout(function(){
                        str = str + localStorage[load + "ys"][int];
                        int = int + 1;
                    },10);
                }
                int = int + 1; 
                ys.push(str);
                str = "";
            }
            int = 0;
            while(localStorage[load + "colors"][int] !== ""){
                while(localStorage[load + "colors"][int] !== ","){
                    setTimeout(function(){
                        str = str + localStorage[load + "colors"][int];
                        int = int + 1;
                    },10);
                }
                int = int + 1; 
                colors.push(str);
                str = "";
            }
            int = 0;
            while(localStorage[load + "sizes"][int] !== ""){
                while(localStorage[load + "sizes"][int] !== ","){
                    setTimeout(function(){
                        str = str + localStorage[load + "sizes"][int];
                        int = int + 1;
                    },10);
                }
                int = int + 1; 
                sizes.push(str);
                str = "";
            }
            loadDrawing();
        }
    }
    if(key === 83){
        if(confirm("Do you want to save the drawing?") === true){
            var answer = prompt("Enter a name for the drawing.");
            localStorage[answer + "xs"] = xs;
            localStorage[answer + "ys"] = ys;
            localStorage[answer + "colors"] = colors;
            localStorage[answer + "sizes"] = sizes;
        }
    }
    if(key === 66){
        thickness = prompt("change thinkness (in pixels)");
    }
    if(key === 67){
        if(confirm("clear the canvas?") === true){
            context.clearRect(0,0,10000,10000);
       }
   }
}
window.onmousedown = function() {
    isMouseDown = true;
}
window.onmouseup = function () {
    isMouseDown = false;
}
window.onmousemove = function(e) {
    if(isMouseDown === true){
        xs.push(getMousePos(canvas, e).x);
        ys.push(getMousePos(canvas, e).y);
        colors.push(color);
        sizes.push(thickness);
        context.beginPath();
        context.moveTo(getMousePos(canvas, e).x, getMousePos(canvas, e).y);
        context.fillStyle = color;
        context.arc(getMousePos(canvas, e).x - (thickness / 2), getMousePos(canvas, e).y - (thickness / 2), thickness, 0, Math.PI * 2);
        context.fill();
        context.closePath();
    }
}

Answer 1

建议的新代码

看来您的两个 while 循环只是试图将逗号分隔的字符串分解为单独的部分，并将结果放入数组中。如果确实如此(您在问题中尚未描述的情况)，那么您可以这样做:

xs = localStorage[load + 'xs'].split(",");

因此，如果您有一个如下所示的输入字符串:

"aaa,bbb,ccc,ddd"

您将得到如下输出数组:

["aaa","bbb","ccc","ddd"]

如果您有不同的输入或期望不同的输出，请准确地向我们展示示例输入和输出的样子。尝试对有缺陷的代码进行逆向工程很难弄清楚代码的实际意图。

<小时/>

解释当前代码的问题

您现在的这个 while 循环代码存在根本性缺陷，会导致无限循环。

       while(localStorage[load + "xs"][int] !== ""){
            while(localStorage[load + "xs"][int] !== ","){
                setTimeout(function(){
                    str = str + localStorage[load + "xs"][int];
                    int = int + 1;
                },10);
            }
            xs.push(str);
            str = "";
        }

问题是这样的。 Javascript 是一种事件驱动语言。当您安排 setTimeout() 时，它会向系统注册一个计时器，当该计时器触发时，它将您的计时器回调放入 Javascript 事件队列中。该事件只会在 Javascript 主线程完成后才会被处理。

在您的具体情况下，您的 while 循环会永远疯狂地旋转，并且 int 不会增加，直到 setTimeout() 运行。但在 while 循环完成之前，setTimeout() 无法运行。因此，由于两者都在等待对方，并且 while 循环永远占用主 JS 线程，因此您会遇到无限循环。这种类型的结构在 Javascript 中是行不通的。