javascript - jquery - 定义加载效果仅出现一次

Question

单击某个图标时，我会向 DOM 添加一条加载消息。问题是，如果用户单击两次(在加载最终消息时，他会看到此消息两次......)。

如何仅防止每个屏幕出现第二个“正在加载...”？我永远不会同时想要多个。

$(document).on('page:change', function () {
    //show loading message
    $("#icon1, #icon2, #icon3").click(function(e) {
      e.preventDefault();
      $("Loading ...")
      .insertAfter( $( "#icon1" ) );
    });    
  });

注意:一些用户建议使用 .one:我认为它不起作用，因为这意味着我只能单击一次，然后什么也不会发生。这不是我想做的。我希望当用户看到“正在加载...”时，他看不到另一个“正在加载...”，但他仍然可以单击一次，看到“正在加载...”，然后当“正在加载...”时消失后，他可以单击并看到它再次出现。

Answer 1

您可以使用 bool 变量，并检查它是 true 还是 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;
    });    
  });