jquery - define that a loading effect only appear ONCE

Question

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 1

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;
    });    
  });

jquery - define that a loading effect only appear ONCE

Sign up