Отображение работы js скрипта по мере его выполнения?

Question

[bismark1]

Пишу парсер. В нём есть консоль в которую должна выводится информация о работе скрипта. Проблема в том что информация в консоли отображается только после выполнения всего скрипта, т.е. работы парсера. Как сделать чтобы информация в консоли отображалась по мере выполнения скрипта? Прилагаю js код:

function thisTime(){
	var date=new Date();thistime='';
	if(date.getHours()>9){thistime=thistime+date.getHours();}else{thistime=thistime+"0"+date.getHours();}thistime=thistime+":";
	if(date.getMinutes()>9){thistime=thistime+date.getMinutes();}else{thistime=thistime+"0"+date.getMinutes();}thistime=thistime+":";
	if(date.getSeconds()>9){thistime=thistime+date.getSeconds();}else{thistime=thistime+"0"+date.getSeconds();}
}
function addLog(){$("#pars_console tbody").append("<tr><td>"+thistime+"</td><td>"+log+"</td></tr>");}
function clearLog(){$("#pars_console tbody").empty();}
var thistime="";
var log="";
var zipname="";
var zipadress="";
var link_array="";
$(document).on("click", "#link_input_button", function(){
	clearLog();
	var pagelink=$("#link_input").val();
	var sitename=pagelink.split("/").splice(2,1).join("/");
	var sitelink=pagelink.split("/").splice(0,3).join("/");
	$.ajax({type:"POST",url:"post.php",data:({action:'parse_check',pars_site:sitename}),async:false,success:function(data){
		if(data){log="Начат пррцесс копирования файлов с сайта <a href=\""+sitelink+"\" target=\"blank\">"+sitename+"</a>";}else{log="Сайт <a href=\""+sitelink+"\" target=\"blank\">"+sitename+"</a> не поддерживается. Процесс остановлен.";}
		thisTime();addLog();
	}});
	$.ajax({type:"POST",url:"post.php",data:({action:'create_zip',pars_link:pagelink}),async:false,success:function(data){
		if(data){zipname=data;zipadress="pars_files/"+data;log="Создан ZIP-архив <a href=\""+zipadress+"\" target=\"blank\">"+zipname+"</a>.";thisTime();addLog();log="В архив добавлен файл-ссылка на источник.";}else{log="Ошибка при создании ZIP-архива. Обратитесь к администратору для исправления данной ошибки.";}
		thisTime();addLog();
	}});
	$.ajax({type:"POST",url:"post.php",data:({site_name:sitename,action:'calculation',pars_link:pagelink}),async:false,success:function(data){
		log="На данной странице обнаружены файлы для скачивания в количестве "+data;thisTime();addLog();
	}});
	$.ajax({type:"POST",url:"post.php",data:({site_name:sitename,action:'title',pars_link:pagelink,zip_adress:zipadress}),async:false,success:function(data){
		log="В архив добавлена обложка книги \"title.jpg\"";thisTime();addLog();
	}});
	$.ajax({type:"POST",url:"post.php",data:({site_name:sitename,action:'link_array',pars_link:pagelink}),async:false,success:function(data){
		link_array=data.split("$/$");
		log="Получен массив со ссылками на изображения.";thisTime();addLog();
	}});
	link_array.forEach(function(item, i, arr){
		$.ajax({type:"POST",url:"post.php",data:({action:'image_load',image_link:sitelink+item,zip_adress:zipadress}),async:false,success:function(data){
		log="Изображение \""+sitelink+item+"\" добавено в архив";thisTime();addLog();
		}});
	});
	log="Работа программы завершена.";thisTime();addLog();
});

Comments

[ProjectSoft]

Ну а как вы хотите, если вы отправили все запросы одним махом и ни какой очереди?

[bismark1]

ProjectSoft, все запросы синхронные, очередь как раз таки есть. Везде стоит async:false. Если я чего то не понял, хотелось бы больше конкретики.

[bismark1]

ProjectSoft, код вне ajax запросов тоже не хочет выполняться, до завершения работы скрипта я уже пробовал подставлять.

[citizen55]

пока js не завершит выполнение вашей функции-парсера он не передаст управление другим. Все ваши синхронные функции вызовутся в следующем цикле. Вот одна статей в которой есть ответ на ваш вопрос https://habr.com/company/ruvds/blog/340508/

[bismark1]

citizen55, спасибо за наводку, изучу этот материал.

[bismark1]

citizen55, боюсь это не совсем то, там везде фигурируют асинхронные запросы, в то время как у меня везде синхронные и если порядок нарушится то скрипт сработает не правильно.

[citizen55]

Вы не совсем проникли в суть статьи. Консоль из инструментов разработчика (и вывод в DOM) то же отработает после завершении работы вашей функции. Если вы хотите получать последовательно информацию о работе скрипта, надо каждый отдельный запрос поместить в свою функцию и вызывать последовательно например так:

function second(){}

function first(){
    $.ajax({
        type:"POST",
        url:"post.php",
        data:(
            {action:'parse_check',pars_site:sitename}),
            async:false,
            success:function(data){
                if(data){
                    log="Начат процесс копирования файлов с сайта <a href=\""+sitelink+"\" target=\"blank\">"+sitename+"</a>";
                    }else{log="Сайт <a href=\""+sitelink+"\" target=\"blank\">"+sitename+"</a> не поддерживается. Процесс остановлен.";
                }
            thisTime();
            addLog();

          setTimeout(second(), 0); // можно и не 0, в любом случае отработает в следующем цикле дав возможность вывести логирование
      }});
}

или использовать функцию генератор.

[bismark1]

citizen55, да спасибо, ваш вариант подошёл. Плавно оно конечно не выводит по строке, а кусками, но в моём случае и этого хватит.

Answer 1

[Clark Kent]

Могу порекомендовать:

• Использовать Promise если доступно ES6
  
• Разбить всю задачу на короткие таски и в начале создать список тасков и дальше их выполнять один за другим c помощью setTimeout(task, 0);
  
• Использовать async / avait если доступно
  

Comments

[bismark1]

Подошёл второй вариант для того чтобы отделаться малой кровью. Плавного вывода правда нет, но в моём случае этого достаточно. Симпатичный был вариант "Использовать async / avait", но я с ним ещё не работал, а времени вникать особо нету.

Answer 2

[grinat]

https://developer.mozilla.org/ru/docs/Web/JavaScri...