Javascript脚本的速度降到零

我已经制作了一个js脚本来将图像（300多个）转换为base-64

<script type="text/javascript">
        var onderdelen, afbeeldingen;
        var c=document.getElementById("myCanvas");
        var container = $("#container ul");
        var lengte = container.length;
        var speed = 1000;
        dataStart = "{\"onderdelen\":[";
        dataEnd = "]}";

        convertToBase64 = function(convertImg){
            if(null == convertImg){
                return "";
            }else{              
                c.width = convertImg.width;
                c.height = convertImg.height;

                ctx=c.getContext("2d");         
                ctx.drawImage(convertImg,0,0);
                dataURL = c.toDataURL("image/jpg").replace("data:image/png;base64,","");

                return(dataURL);
            }   

        };

        $("#output").append(dataStart);

        container.each(function(index,value){
            setTimeout( function() {

                var deze = $(value) 

                $("#output").append("{\"nr\" : \""+deze.attr("id")+"\", \"naam\" : \""+deze.attr("naam")+"\", \"cat\" : \""+deze.attr("cat")+"\"},");

                kinderen = deze.find("li");
                kinderen.each(function(i,v){

                    naam = $(this).parent().attr("id")+"_"+$(this).attr("class");
                    setTimeout(function(){
                        var img = $(v).find("img").get(0)
                        $("#output").append("{\"naam\": \""+ naam + "\", \"data\" : \"" + convertToBase64(img) + "\"},");
                    },i*speed);

                    $(this).hide();
                });

                console.log(index);

            }, index*speed*5);

            //if(index==100){return false;}

        });

    </script>

var Onderelen，afbeeldingen；
var c=document.getElementById（“myCanvas”）；
var容器=$（“#容器ul”）；
var lengte=容器长度；
无功转速=1000；
dataStart=“{\”onderdelen\：[”；
dataEnd=“]}”；
convertToBase64=函数（convertImg）{
if（null==convertImg）{
返回“”；
}否则{
c、 宽度=转换宽度；
c、 高度=转换高度；
ctx=c.getContext（“2d”）；
ctx.drawImage（convertimg0,0）；
dataURL=c.toDataURL（“image/jpg”）.replace（“data:image/png；base64，”，”）；
返回（dataURL）；
}   
};
$（“#输出”）.append（dataStart）；
容器。每个（函数（索引、值）{
setTimeout（函数（）{
var deze=$（值）
$（“#output”）.append（“{”nr\“：\”+deze.attr（“id”）+“\”，“naam\”：\”+deze.attr（“naam”）+“\”，“cat\”：\“+deze.attr（“cat”）+“\”）；
Kinden=deze.find（“李”）；
幼儿园每个（功能（i、v）{
naam=$（this.parent（）.attr（“id”）+“”+$（this.attr（“类”）；
setTimeout（函数（）{
var img=$（v）.find（“img”）.get（0）
$（“#输出”）.append（“{”naam\“：\”+naam+“\”，“数据\”：\“+convertToBase64（img）+“\”）；
}，i*速度）；
$（this.hide（）；
});
控制台日志（索引）；
}，指数*速度*5）；
//如果（索引==100）{return false；}
});

当我运行这是排序关闭在37（索引），如果我等待足够长的时间是将完成。有人能告诉我如何使它运行得更平稳吗

---

是否有一些javascriptfunction我过载了，是否有一种形式的现金我不知道，我是否过度使用了setTimeout函数，我是否过度使用了dom，我的文件是否太大了。任何想法

setTimeout

不会创建另一个线程，但会在“消息循环”中对任务进行排队，这样它们都会在一个循环过程中触发，如果持续时间过长，则会挂断UI

---

改用

webworkers

或创建

队列

并逐个处理图像，而不是同时运行多个计时器

为什么要在循环中创建多个计时器？