Skip to content

Instantly share code, notes, and snippets.

@chrisirhc
Last active Dec 17, 2015
Embed
What would you like to do?
Timeout with no targetable DOM feedback

Case 2

Read about this and more on the ThousandEyes blog.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre id="result"></pre>
<button id="myBtn">Go!</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
/* global $ */
var isProcessingStarted = false,
isProcessingDone = false,
$myBtn = $('#myBtn');
$myBtn.on('click', clickHandler);
function clickHandler() {
if (!isProcessingStarted) {
startProcessing();
} else {
checkIfReady();
}
}
function startProcessing() {
isProcessingStarted = true;
$myBtn.text('Processing...');
// Processing takes about two seconds before it's ready
// (could be an AJAX request)
setTimeout(processingDone, 2000);
}
function processingDone() {
isProcessingDone = true;
$myBtn.text('Done');
}
function checkIfReady() {
if (isProcessingDone) {
$('#result').append('Horray!!\n');
} else {
$('#result').append('Fail :(\n');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment