Different timers need to pauze the global page on specific triggers

[Darghon]

Hello all,

I'm working on a javascript page on which several timers are set.

Each timer gets a tick every 10 milli seconds, but the amount added to each timer is different.

Whenever a timer reaches its maximum

the page needs to pause for any action that needs to be taken, and continue once it's done.

 

Any idea's on how to do this?

 

simple visualisation is, you have 5 people, each one has a different speed.

so every 10 second the speed of each player is added to a que, once 1 of the players their queue is full (100%), they get to move. at which point  the others need to wait until the player made his move.

 

My code this far:

the .bar element has a rel that contains sequence number, agil and name (=> <span class="bar" rel="<?php echo $i.'|'.$timer.'|Mob '.$i; ?>">)

var timers = new Array();
var max = 4;
var min = 1;
var mod = 0.000;
var max_agil = null;
var min_agil = null;

var t = null;

//calculate pace of each timer
function init(){
	$('.bar').each(function(){
		var v = $(this).attr('rel').split('|');
		timers[v[0]] = 0;
		if(parseInt(v[1]) > max_agil || max_agil == null) max_agil = parseInt(v[1]);
		if(parseInt(v[1]) < min_agil || min_agil == null) min_agil = parseInt(v[1]);
	});
	mod = parseFloat(Math.max(1,(max-min))/Math.max(1,(max_agil - min_agil)));
	animateBars();
}
//fill the bar by agil * the calculated pace	
function animateBars() {
	var c = $('.filler').length;
	$('.filler').each(function(){
		var v = $(this).parent().attr('rel').split('|');
		var w = parseFloat($(this).width());
		w += (parseFloat(parseFloat(mod)*parseInt(parseInt(parseInt(v[1]) - min_agil))) + parseInt(min)) * parseInt($(this).parent().width()) / 100;

		$(this).css({ width: w + 'px' });
		if($(this).width() >= $(this).parent().width()){
			var nw = Math.max(0,parseInt($(this).width()) - parseInt($(this).parent().width()));

			$(this).css({ width: nw + 'px' });
			nw = null;
			makeMove($(this));

		}
		v = null;
		w = 0;
		c--;
		if(c == 0){
			t = setTimeout(animateBars,10);
		} 
	});

}

init();

function makeMove(that){
	var v = $(that).parent().attr('rel').split('|');
	var mob = $('#mob_' + v[0]);
	var column = $(mob).parent().attr('class').match(/(column-([\d])+)/gi);
	var row = $(mob).parent().attr('class').match(/(row-([\d])+)/gi);

	column = parseInt(column[0].replace('column-',''));
	row = parseInt(row[0].replace('row-',''));

	var pos = new Array();

	if(column > 0 && $(mob).parent().parent().find('.column-' + (column-1) + '.row-' + (row)).text() == '') pos.push('w');
	if(row > 0 && $(mob).parent().parent().find('.column-' + (column) + '.row-' + (row-1)).text() == '') pos.push('n');
	if(column < 9 && $(mob).parent().parent().find('.column-' + (column+1) + '.row-' + (row)).text() == '') pos.push('e');
	if(row < 9 && $(mob).parent().parent().find('.column-' + (column) + '.row-' + (row+1)).text() == '') pos.push('s');

	var dir = pos[parseInt(Math.random() * pos.length)];
	switch(dir){
		case 'n':
			$(mob).parent().parent().find('.column-' + (column) + '.row-' + (row-1)).append(mob).delay(2000);
			break;
		case 'e':
			$(mob).parent().parent().find('.column-' + (column-1) + '.row-' + (row)).append(mob).delay(2000);
			break;
		case 's':
			$(mob).parent().parent().find('.column-' + (column) + '.row-' + (row+1)).append(mob).delay(2000);
			break;
		case 'w':
			$(mob).parent().parent().find('.column-' + (column+1) + '.row-' + (row)).append(mob).delay(2000);
			break;
		default:
			break;
	}
}

 

The code above does everything that it needs to do (a random move when a bar is full), but it doesn't wait for it to complete before it continues

[nogray]

You can simply declare a global variable called pause and set it to false. When you want to pause everything, set it to true and when the move is finished reset it to false. Varify the pause variable on all your other functions, e.g.

var pause = false;
my_func(){
    if (pause) return;
    // do other stuff
}
move_func(){
    pause = true;
    // move code
    pause = false;
}

[Darghon]

Lol, why didn't I think of that.

I've implemented a simular solution, and it works great.

I now fill up an action que, if any entries exist in the que, it processes the que first, and returns to the global counter once its done.

 

Thx for the idea