2013-04-05 3 views
0

Я прихожу из фона рабочего стола, когда я изучаю Javascript, очень сложно понять механизм потоковой передачи в Javascript.Javascript с многопоточным?

Например:

<!DOCTYPE HTML> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#btn1").click(function(){ 
     for (var i = 0 ; i < 100000 ; i ++){ 
      $("#loop1").html(i); 

     } 
    }); 

    $("#btn2").click(function(){ 
     for (var i = 0 ; i < 100000 ; i ++){ 
      $("#loop2").html(i); 

     } 
    }); 
}); 
</script> 
</head> 
<body> 

Loop 1 : <p id="loop1"></p> 
<button id="btn1">Button 1</button> 
<br/><br/><br/> 

Loop 2 : <p id="loop2"></p> 
<button id="btn2">Button 2</button> 

</body> 
</html> 

При нажатии на кнопку 1, браузер похмелья, поэтому кнопка 2 не будет реагировать, когда я нажимаю его. Обычно в настольном приложении я отправляю цикл в фоновый поток. Но как я буду это делать в Javascript? Или что лучше всего подходит для обработки длительной обработки в Javascript?


отредактирован:

ниже код не работает, но не знаю, почему.

$("#btn1").click(function(){ 

     setTimeout(function(){ 
      for (var i = 0 ; i < 100000 ; i ++){ 
       $("#loop1").html(i); 

      } 
     } 
     , 0); 
    }); 
+0

Читать это - http://www.htmlgoodies.com/html5/tutorials/introducing-html-5-web-workers-bringing-multi-threading- to-javascript.html # fbid = pjvP9hIpB6g – lifetimes

+0

Кроме того, http://www.sitepoint.com/multi-threading-javascript/. –

ответ

2

Как предыдущие ответы уже говорилось, WebWorkers только вариант JavaScript для многопоточной. К сожалению, нет никакой надежды, если вы захотите сделать модификации DOM.

То, что большинство людей забывают, когда вы вызываете функции с setTimeout и setIntervalинтерфейс не замерзает и до сих пор получает обновления.

function btnClickHandler() { 
    setTimeout(doStuff, 1); // prevent UI freeze 
} 

function doStuff() { 
    // do your stuff here 
} 

В вашем случае:

var i, interval; 

$("#btn1").click(function(){ 
    i = 0; // reset i 

    // create interval 
    interval = setInterval(btn1Handler, 1); // run btn1Handler every 1ms 
}); 

function btn1Handler() { 
    $("#loop1").html(i); 

    if(i++ >= 100000) { 
     // cancel the interval 
     clearInterval(interval); 
    } 
} 
+0

Ваш пример потрясающий. Он работает отлично. Я отредактировал свой вопрос, прежде чем вы добавили этот пример, я неправильно понял ваш смысл, и поэтому я вышел с идеей выше, вы знаете, почему код (в редактируемой области) в моем вопросе не работает? – GMsoF

+0

Я запутался в том, что поведение setinterval и settimeout действительно так похоже на создание нового потока. Но все говорят, что javascript однопоточный. Мне любопытно, как setinterval и settimeout сделали волшебство? – GMsoF

+1

, потому что 'setTimeout' и' setInterval' основаны на времени, они не блокируют скрипт, поэтому он возобновляется. Однако я предлагаю использовать интервал как цикл вместо того, чтобы запускать весь цикл внутри таймаута. После использования тайм-аута или обработчика интервалов пользовательский интерфейс обновляется.Если вы зациклились в обработчике тайм-аута/интервала, он все равно заморозит пользовательский интерфейс. –

2

В Javascript нет многопоточности.

Некоторые методы пытаются реализовать несколько потоков в спецификации HTML5 (WebWorkers), другие пытаются реализовать ее в самом javascript, но базовая спецификация (ECMA) является однопоточной.

Вы можете просто искал на Google ..

+0

«В Javascript нет многопоточности изначально». Как WebWorkers не многопоточен или не является родным? –

+0

Это не часть спецификации ECMA, а расширение DOM. – Gui13

0

Помимо если вы используете web workers (и они не могут напрямую изменять DOM), есть только один пользователь Javascript нить в вашем браузере.

События складываются до тех пор, пока ваша функция не вернется. У вас может быть две длительные операции, изменяющие DOM параллельно.

Смежные вопросы