Idle Timeout in jquery recursion

JavaScript
1

Hi.
I am making the Simon app for the front end. I am currently stuck at a part of my code.

function play(limit) {
	timeId[0] = setTimeout(function() {
		u_mode = false;
		u_moves = [];
		var choice = Math.floor(Math.random() * 4 + 1);
		gen_moves.push(choice);
		$("#display").text(i <= 9 ? "0"+i : i);
		$.each(gen_moves, function(index) {
			var color = $("#"+gen_moves[index]).css("background-color");
			timeId[1] = setTimeout(function() {
				$("#"+gen_moves[index]).css("background-color", colors[0][gen_moves[index]]);
			}, 2000 + 1000 * index);
			timeId[2] = setTimeout(function() {
				$("#"+gen_moves[index]).css("background-color", colors[1][gen_moves[index]]);
			}, 2000 + 1000 * (index + 1));
			sleep(200);
		});
		u_mode = true;
		console.log(gen_moves + " " + $.now() + " " + u_mode);
		setTimeout(function() {
			console.log();
		}, 3000 * i);
		timeId[3] = setTimeout(function() {
			if(u_mode) console.log("Validating user input: " + $.now());
		}, 2000 + 1000 * i);
		if (++i <= limit) play(limit);
	}, 1000 + 1000 * i);
}

So ,what I am trying to do here is, run a recursion to play the colours, and then wait for user input, and after some time, move on to the next recursion till the limit is reached or the user picks an incorrect colour. u_mode is to check if the sequence has been shown so that the user can be allowed to click.
After the line u_mode = true, I am trying to make the execution simply be idle for sometime, so that user gets time to enter the correct sequence. It would have been better to simply wait for a user input, and then start a timer to allow the user to enter the sequence.
The thing is, I am not able to do either of them. I also couldn’t find a better solution. I also couldn’t figure out how to use $.deferred here. Please help.