Question

我制作了一个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>

当我运行时，这是排序关闭在37（索引），如果我等待足够长的时间将完成。任何人都可以告诉我如何让它运行得更顺畅吗？

是否有一些javascript函数我重载，是否有一种形式的cashe我不相关，我是在过度使用setTimeout函数，我是在过度工作dom，我的文件是大的。有任何想法吗。

Answer 1

setTimeout不会创建另一个线程，但会在＆＃34; message loop＆＃34;中排队任务。因此，如果它们持续太长时间，它们都会在一个循环过程中触发并挂起UI

改为使用Web workers或创建Queue并逐个处理图片，而不是一次运行多个计时器

Javascript脚本减慢到无效

1 个答案: