On click on a certain icon, I add to the DOM a loading message. The problem is that if the user clicks twice (while the final message is loading, he sees this message twice....).
How to only prevent the appearance of a second "loading..." per screen ? I never want more than one at once.
$(document).on('page:change', function () {
//show loading message
$("#icon1, #icon2, #icon3").click(function(e) {
e.preventDefault();
$("Loading ...")
.insertAfter( $( "#icon1" ) );
});
});
You can use a boolean variable, and check if it is true or false
$(document).on('page:change', function () {
//show loading message
var isLoading = false;
$("#icon1, #icon2, #icon3").click(function(e) {
if(isLoading == true) return;
isLoading = true;
e.preventDefault();
$("Loading ...")
.insertAfter( $( "#icon1" ) );
//After finishing loading
isLoading = false;
});
});