Как я могу отобразить вывод каждого цикла на петле «для»? -- html поле с участием loops поле с участием canvas поле с участием for-loop пол Связанный проблема

How can I display the output of each loop on a “for” loop?


0
vote

проблема

русский

Я общий новичок, и я работаю над «простыми числами» рисованием / анимацией с помощью HTML5 Canvas и JS. Мне трудно с помощью петли «Для», потому что браузер отображает рисунок только после того, как «для» LOOP выполняется, а не пока это работает (отображение вывода каждого цикла, как анимация).

<Сильные> HTML / CSS:

 <код> function clusterGrid($zoom,$nelt,$nelg,$swlt,$swlg)     {     $singlemarkers = array();     $clusters = array();  list($swlg, $swlt, $nelg, $nelt, $step) = $this->TileMyBounds($swlg, $swlt, $nelg, $nelt, $zoom); $calcbounds = $this->TileMyBounds($swlg, $swlt, $nelg, $nelt, $zoom); $queryconcat = ""; $length_lng = ceil(($nelg-$swlg)/$step); $length_lat = ceil(($nelt-$swlt)/$step); $orgnelg = $nelg; $orgswlt = $swlt;  for($i=0;$i < $length_lng + 1; $i++) {     $nelg -= $step;     $temp_swlt = $swlt;      for($j=0; $j < $length_lat + 1; $j++) {          $temp_swlt += $step;          if($nelg > $orgnelg) continue;         if($temp_swlt > $nelt) continue;         if($nelg < $swlg) continue;         if($temp_swlt < $orgswlt) continue;          $q = $this->db->select('             COUNT(*) AS CO,             (MAX(lat)+MIN(lat))/2 AS lat,             (MAX(lng)+MIN(lng))/2 AS lng')         ->where('`lat` BETWEEN '.$temp_swlt.' AND '.($temp_swlt+$step).' AND              `lng` BETWEEN '.($nelg-$step).' AND '.$nelg)         ->get('markers');         $queryconcat += $this->db->last_query();          $result = $q->row_array();          if($result['CO'] == 0) {             continue;         }             $clusters[] = array('lat' => ($result['lat']), 'lng' => ($result['lng']), 'size' => $result['CO']);         }     } return array('singlemarkers' => '', 'clustermarkers' => $clusters, 'bounds' => $calcbounds, 'lengths' => array($length_lng, $length_lat));   } 0  

js (jscode.js):

 <код> function clusterGrid($zoom,$nelt,$nelg,$swlt,$swlg)     {     $singlemarkers = array();     $clusters = array();  list($swlg, $swlt, $nelg, $nelt, $step) = $this->TileMyBounds($swlg, $swlt, $nelg, $nelt, $zoom); $calcbounds = $this->TileMyBounds($swlg, $swlt, $nelg, $nelt, $zoom); $queryconcat = ""; $length_lng = ceil(($nelg-$swlg)/$step); $length_lat = ceil(($nelt-$swlt)/$step); $orgnelg = $nelg; $orgswlt = $swlt;  for($i=0;$i < $length_lng + 1; $i++) {     $nelg -= $step;     $temp_swlt = $swlt;      for($j=0; $j < $length_lat + 1; $j++) {          $temp_swlt += $step;          if($nelg > $orgnelg) continue;         if($temp_swlt > $nelt) continue;         if($nelg < $swlg) continue;         if($temp_swlt < $orgswlt) continue;          $q = $this->db->select('             COUNT(*) AS CO,             (MAX(lat)+MIN(lat))/2 AS lat,             (MAX(lng)+MIN(lng))/2 AS lng')         ->where('`lat` BETWEEN '.$temp_swlt.' AND '.($temp_swlt+$step).' AND              `lng` BETWEEN '.($nelg-$step).' AND '.$nelg)         ->get('markers');         $queryconcat += $this->db->last_query();          $result = $q->row_array();          if($result['CO'] == 0) {             continue;         }             $clusters[] = array('lat' => ($result['lat']), 'lng' => ($result['lng']), 'size' => $result['CO']);         }     } return array('singlemarkers' => '', 'clustermarkers' => $clusters, 'bounds' => $calcbounds, 'lengths' => array($length_lng, $length_lat));   } 1  

Я читал другие ответы, и теперь я понимаю, что главная причина: JavaScript в веб-браузере - это однопоточное.

Но есть ли способ достичь того, что мне нужно? (Что мне нужно: отображать рисунок на экране, так как цикл прогрессирует)

Спасибо заранее,

Приветствие от Lima - perú

Английский оригинал

I'm a total noob and I´m working on a "prime numbers" drawing/animation using HTML5 Canvas and JS. I'm having a hard time with the 'for' loop because the browser is displaying the drawing only after the 'for' loop is done and not while this is working (Displaying the output of each loop, like an animation).

HTML/css:

<!doctype html>   <html> <head> </head>     <style>      body         {         background: #999999         }      #canvas          {         background: white;         border: 19px solid black;         }      </style>  <body>      <canvas id="canvas" width="4000" height="4000">      Bájate un nuevo navegador!!      </canvas>     <script src="jscode.js"></script>  </body>   </html> 

JS (jscode.js):

var canvas1 = document.getElementById('canvas'); var context = canvas.getContext ('2d');  // Text properties  context.font = '32pt Arial'; context.fillStyle = 'DeepSkyBlue'; context.StrokeStyle = 'DarkSlateGray';  // Line properties context.StrokeStyle = "rgb (200,0,0)"; context.lineWidth = 1;  // Each Natural number is represented by a segment // "t" corresponds to the length of each segment. var t = 3;  // Starting position within the canvas. var x = 500; var y = 500;   //Array stores every movement's direction. //(We need to know the last segment direction in order "continue" the drawing)  var Dmemory = new Array();  // Drawing using a Path function.   // Drawing "manually".         context.beginPath();         //0          context.moveTo(x,y);         Dmemory [0] = "A";         //1         /*UP*/ var y = y - t;         context.lineTo(x,y);         Dmemory [1] = "A";  // Continue using a "for" loop.          // Variable "num" is the LIMIT. The program will run until the loop gets to this number.                 var num = 10000;  // The program begins with 1 and starts counting adding 1+.     for (i=2 ; i < num ; i++ )     {  //Creating a "Divisors tracking variable".   //We are going to divide each number between all the natural numbers below to verify if its a prime.         var contador = 0;         for ( div = i ; div > 0 ; div--)         {                 if (i%div == 0)             {             contador = contador + 1;              }             //Breaking condition: More than 2 divisors.             if (contador>2)             {             break;             }          }         //Primes Test: Primes have ONLY two divisors: Themselves and number One         if (contador == 2)              {                    //If Prime: check the last movements direction and proceed.                 switch (Dmemory[i - 1])                 {                  case "A":                     var y = y - t;                     context.lineTo(x,y);                     context.stroke();                     Dmemory[i]="D";                     break;                  case "B":                     var y = y + t;                     context.lineTo(x,y);                     context.stroke();                     Dmemory[i]="I";                     break;                  case "D":                     var x = x + t;                     context.lineTo(x,y);                     context.stroke();                     Dmemory[i]="B";                     break;                  case "I":                     var x = x - t;                     context.lineTo(x,y);                      context.stroke();                     Dmemory[i]="A";                  }               }         else             {                 //If not Prime: check the last movement direction and proceed.                 switch (Dmemory[i - 1])                 {                  case "A":                     var y = y - t;                     context.lineTo(x,y);                     context.stroke();                     Dmemory[i]="A";                     break;                  case "B":                     var y = y + t;                     context.lineTo(x,y);                     context.stroke();                     Dmemory[i]="B";                     break;                  case "D":                     var x = x + t;                     context.lineTo(x,y);                     context.stroke();                     Dmemory[i]="D";                     break;                  case "I":                     var x = x - t;                     context.lineTo(x,y);                      context.stroke();                     Dmemory[i]="I";                     break;                  }              }       } 

I´ve been reading other answers and now I understand the main reason: JavaScript in the web browser is single-threaded.

But, is there any way to accomplish what I need? (What I need: To display the drawing on screen as the loop progresses)

Thank you in advance,

Greetings From Lima - Perú

</div
           

Список ответов

0
 
vote
vote
Лучший ответ
 

Чтобы иметь возможность сообщить о прогрессе, вы должны вычислить на данный интервал, чтобы система получила достаточно моментов для «дыхания».
Ниже приведена поддельные интервальные вычисления, которые будут зависеть на регулярной основе. Я надеюсь, что это может помочь вам добраться до вашего решения.

http://jsbin.com/qarivina/1/edit?js. / a>

 <код> var canvas = document.getElementById('canvas'); var context = canvas.getContext ('2d'); setupNow();  function computeFromTo(i1, i2) {   var st = now();   for (var i=i1; i<i2; i++) computeForIndex(i);   var ed = now();   var timeTaken = (ed-st); }  function computeForIndex(i) {   var res = Math.pow(i,2.5)/Math.abs(1 + Math.sin(i)); }  function beginCallCompute() {   var startIndex    = 0  ;   var indexIncrease = 500 ;   var lastIndex     = 500000;    var computeInterval = setInterval(callCompute, 5);    function callCompute() {     computeFromTo(startIndex, startIndex+indexIncrease);     startIndex += indexIncrease;     context.clearRect(0,0,canvas.width, canvas.height);     context.fillText(startIndex, 20, 20);     if (startIndex>=lastIndex) {        clearInterval(computeInterval);     }   }  }  beginCallCompute();   // ---------------------------  function setupNow() {   window.now = ( performance && performance.now.bind(performance) )|| Date.now ; }   
 

to be able to report progress, you have to compute on a given interval, so that the system gets enough moments to 'breathe'.
Below is a fake interval computation that will be called on a regular basis. I hope it can help you to get to your solution.

http://jsbin.com/qarivina/1/edit?js,output

var canvas = document.getElementById('canvas'); var context = canvas.getContext ('2d'); setupNow();  function computeFromTo(i1, i2) {   var st = now();   for (var i=i1; i<i2; i++) computeForIndex(i);   var ed = now();   var timeTaken = (ed-st); }  function computeForIndex(i) {   var res = Math.pow(i,2.5)/Math.abs(1 + Math.sin(i)); }  function beginCallCompute() {   var startIndex    = 0  ;   var indexIncrease = 500 ;   var lastIndex     = 500000;    var computeInterval = setInterval(callCompute, 5);    function callCompute() {     computeFromTo(startIndex, startIndex+indexIncrease);     startIndex += indexIncrease;     context.clearRect(0,0,canvas.width, canvas.height);     context.fillText(startIndex, 20, 20);     if (startIndex>=lastIndex) {        clearInterval(computeInterval);     }   }  }  beginCallCompute();   // ---------------------------  function setupNow() {   window.now = ( performance && performance.now.bind(performance) )|| Date.now ; } 
</div
 
 

Связанный проблема

1  JavaScript: Получение идентификатора родителя из документа  ( Javascript getting the id of the parent from a document ) 
У меня возникли проблемы с тем, чтобы получить идентификатор родителя документа, который здесь «iFrame1». Как вы можете видеть, что JavaScript должен проживат...

0  Как сделать левую и правую границу карты в ионном прозрачном  ( How to make the left and right border of a card in ionic transparent ) 
Ниже приведен мой HTML. У меня в общей сложности 3 карты в трех столбцах и хотите только левую и правую сторону быть прозрачными. Я пробовал устанавливать гра...

3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS)  ( Is there any way to distinguish touch vs mouse interactions in windows 8 html ) 
Я в настоящее время строю приложение, которое имеет много внимания на панорамирование, которое выглядит и чувствует себя красиво, когда касается и манипулируе...

0  Как вы используете PHP и SQL для отправки данных таблицы на другую таблицу  ( How do you use php and sql to submit table data to another table ) 
У меня есть таблица полетов, и я использую цикл, чтобы распечатать информацию о рейсах, наряду с кнопкой отправки, кнопка, которая нажала, - это представленны...

6  Как я могу найти неиспользованные CSS в AJAX приложении?  ( How can i find unused css in ajax app ) 
Я искал, и я не могу найти какие-либо дополнения или JavaScript для поиска неиспользованных CSS в приложениях AJAX. Select-Me Selectors Можете сделать са...

30  Как я могу использовать Nodejs с Windows 7? [закрыто]  ( How can i use nodejs with windows 7 ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> <Путь d = "M15 6.38A6.48 6.48 0 007.78. 04H-.02A6.49 6.49 0 002.05 ...

0  всплывающее окно не назначает центр экрана  ( Popup not assign the center of the screen ) 
У меня есть код ниже, чтобы назначить всплывающую точный центр экрана. Но это не работает. Всплывающее окно появляется в разных местах, основанных на размере ...

-2  Как вы можете центрировать галерею с HTML и CSS  ( How can you center a gallery with html and css ) 
Я выхожу новый HTML и CSS и надеюсь, что кто-то может помочь. с помощью W3 Schools ( http://www.w3schools.com/css/css_image_gallery. ASP ) Я создал простую ...

4  Как генерировать документ Word (DOC, DOCX) в ASP.NET? [закрыто]  ( How to generate word documentdoc docx in asp net ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт . Этот вопрос должен быть больше Фокусированный . В настоя...

0  Почему изображение не отображается в Div в IE8  ( Why image doesnt show up within a div in ie8 ) 
У меня есть следующие HTML: <код> <!-- default stylesheets --> <link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css"> <!-- if ie version...

0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC?  ( How to close popup when youtube video is playing on esc button button ) 
Нажмите меня, чтобы увидеть демонстрацию Когда видео не играет, то кнопка ESC нажала всплывающее окно, но он не работает при воспроизведении видео. ...

-1  Как схватить значение флажки как целое число и не строку? [Дубликат]  ( How to grab checkbox value as integer and not string ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

2  SMTPClient отправляет RAW HTML  ( Smtpclient sending raw html ) 
Может ли кто-нибудь сказать мне, почему следующий код отправляет электронные письма в Raw HTML? Как в, электронная почта выглядит когда вы просматриваете исто...

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

Связанный проблема

1  JavaScript: Получение идентификатора родителя из документа 
0  Как сделать левую и правую границу карты в ионном прозрачном 
3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS) 
0  Как вы используете PHP и SQL для отправки данных таблицы на другую таблицу 
6  Как я могу найти неиспользованные CSS в AJAX приложении? 
30  Как я могу использовать Nodejs с Windows 7? [закрыто] 
0  всплывающее окно не назначает центр экрана 
-2  Как вы можете центрировать галерею с HTML и CSS 
4  Как генерировать документ Word (DOC, DOCX) в ASP.NET? [закрыто] 
0  Почему изображение не отображается в Div в IE8 
0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC? 
-1  Как схватить значение флажки как целое число и не строку? [Дубликат] 
0  .append () элемент с более чем одним классом 
2  SMTPClient отправляет RAW HTML 
1  JavaScript не работает над динамическим контентом 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.