jQuery Question
jquery - define that a loading effect only appear ONCE
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" ) );
});
});
Note: some users suggested to use .one: I don't think it works because it means I can only click once then nothiung happens. It is not what I want to do. i want that WHILE a user sees "loading..", he can"t sees another "loading..." but he can still click onc,e sees the "loading...", then when the "loading.." disappears he can click and see it appear again.
Answer Source
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;
});
});