Я сделал 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функция я overload, есть ли форма cashe, я не об этом, я перерабатываю функцию setTimeout, я перерабатываю dom, мои файлы большие. Есть идеи.
setTimeout
не создает другие потоки, а ставит в очередь задачи в "цикле сообщений", поэтому все они будут запускаться в одном курсовом курсе и повесить пользовательский интерфейс, если они будут длиться слишком долго
Вместо этого используйте Web workers
или создавайте Queue
и обрабатывайте изображения один за другим, вместо одновременного запуска нескольких таймеров