Controlling while loops in Dart

Question

I am stuck trying to do something simple. I want to be able to count upwards until I click on the screen at which point i want the counting to stop. In reality the code itself will be carrying out complex AI calculations for a game, but first I want to understand how to control the while loop. In android this would be trivial.

Here is what my code looks like

bool OK = true;

main() async{
 html.querySelector('#content').onMouseUp.listen((e){
   OK = false;
 });

 await for(int i in naturals){
   print(i);
   await sleep();
 }
}

Stream get naturals async* {
 int k = 0; while (OK) { yield await k++; }
}

Future sleep() {
 return new Future.delayed(const Duration(milliseconds: 1), () => "1");
}

I put the sleep() method in as a way to ensure that control is passed to the event loop.

Is it possible to control a while loop without the sleep() method?

Answer 1

update

Just enqueue to allow the event queue to process outstanding events without additional delay use

Future sleep() {
  return new Future.delayed(Duration.ZERO);
}

original

JavaScript and therefore can't Dart have threads in the browser and you need to pass control back to the event queue to allow it to process other events like you do with sleep().

Another approach would be to use webworkers and run the heavy calculation in a background task (webworker) to keep the UI thread free to process user events. This way even additional CPU cores can be utilized which isn't possible when all code runs in the browsers UI thread.

I don't know how to create webworkers in Dart though except with Angular2 Dart Web workers in Angular 2 Dart where Angular does the initialization. I don't think it's too difficult but I don't know any docs.

Answer 2

To provide a more general answer - instead of a loop, you want to schedule a sequence of future tasks that each executes one iteration or step of your AI code (or whatever background process you want to have running).

You can have the step task recursively schedule itself:

dynamic doSomething(_) {
  print('Doing something ...'); 
  if(!stop) {
    new Future.delayed(delay, (){}).then(doSomething);
  }
  return null;
}

main() async {

  doSomething(null);

}

Although I don't recommend doing this. It's awkward to control - the step code has to check a flag variable to see if it should continue or stop and it's free running.

Alternatively you could use a Timer:

void doSomething(Timer timer) {
  print('Doing something ...');  
}

main() async {

 new Timer.periodic(delay, doSomething);

}

This is throttled at a constant rate and has a uniform time step, and is easier to stop (call cancel() on the timer).

Another approach might be to synchronize with the browser's draw refresh cycle by requesting future animation frames:

import 'dart:html';

doSomething(num delta) {
  print('Doing something ...');  
  window.animationFrame.then(doSomething);
}

void main() {
  window.animationFrame.then(doSomething);
}

Time steps are not constant but you get the time delta. The advantage of this approach is that animation frame futures will not be scheduled if the browser window is hidden.

See How do I drive an animation loop at 60fps with Dart?

Those are very simple examples. Setting up proper background processes for physics simulation and AI in web games is actually surprisingly (to me at least) non-trivial. Here are two resources I found helpful.

http://gameprogrammingpatterns.com/ - a nice free online book of game programming patterns. http://gameprogrammingpatterns.com/game-loop.html - chapter on game loops.

http://gafferongames.com/game-physics/fix-your-timestep/ - part of a sequence of articles on physics simulation in games.

Answer 3

Following all suggestions this is the code I have ended up with, putting the heavy lifting in a worker, with controllable stopping and starting. I have used simple counting to get this working, but this is being replaced with my complex AI game calculations.

This uses time slices of 100ms within a worker isolate, which can only be interrupted after it has finished the batch. This allows me complete freedom to have complex animations on the screen while all this hard work is being done.

import 'dart:html' as html;
import 'dart:isolate';
import 'dart:math';

SendPort worker;
bool working = false;

main() async{

  await startWorker();

  html.querySelector('#stage').onMouseUp.listen((e){
    if(working)worker.send('stop');
    else worker.send('go');
  });

}

startWorker() async{
  var response = new ReceivePort();

  await Isolate.spawnUri(Uri.parse("worker.dart"), null ,response.sendPort)
      .then((_) => response.listen((msg){

    if(msg is SendPort) {
      worker = msg;
    }
    else {
      messageReceived(msg);
    }
  }));
}

messageReceived(String message){
  switch (message){
    case 'working': working = true;
    break;

    case 'idle': working = false;
      break;

    default : print(message);
      break;
  }
}

worker.dart

import 'dart:isolate';
import 'dart:async';

SendPort replyTo;
bool OK = false;
const timeSlice = 100;

main(List<String> args, SendPort reply) async{
  var response = new ReceivePort();
  reply.send(response.sendPort);
  replyTo = reply;
  response.listen((msg) => messageReceived(msg));
  replyTo.send("Hello from worker. Click to start and stop me");
}

messageReceived(String message){
  switch(message){
    case 'stop':
      replyTo.send('idle');
      OK = false;
      break;

    case 'go':
      replyTo.send('working');
      go();
      break;
  }
}

go()async {
  OK = true;
  int i = 0;

  batchJob(){
    int startTime = new DateTime.now().millisecondsSinceEpoch;
    int elapsed = 0;

    while(elapsed < timeSlice){

      i ++; // the central routine

      elapsed = new DateTime.now().millisecondsSinceEpoch - startTime;
    }
 }

  while(OK){
    batchJob();
    replyTo.send(i.toString());
    await new Future.delayed(const Duration(milliseconds: 0), () {});
  }
}