Question

我想构建一个标题为“正在加载”的横幅，并在应用程序完成时隐藏。

<div id="ajaxBanner"></div>


function ajaxBanner(action, confirmMsg) {

    if (action == 'show') {
        $('#msg').text('Loading...');
        $('#ajaxBanner').show();
    } else if (action == 'hide') {
        $('#ajaxBanner').fadeOut();
    } else if (confirmMsg == true) {
        $('#ajaxBanner').show();
        ajaxBanner_timeout = setTimeout(ajaxBanner('hide'), 2000);
    }
};

该功能向用户显示“正在加载”横幅消息，然后将其隐藏。问题是，我也想使用这个空间来确认消息，比如“XXXX添加到XXX”。

问题是，当confirmMsg为true时，它会被后续的AJAX调用杀死，并显示Action show。

当ajaxBanner_timeout完成时，怎么说只做动作==显示或动作==隐藏？

Answer 1

一个问题是setTimeout（）不接受函数调用它需要字符串或匿名函数try setTimeout("ajaxBanner('hide')", 2000);。现在，该功能立即被称为无暂停。另一种方法是

setTimeout(function(){
  //do something;
},2000);

注意这是更好的方法。

Answer 2

问题是你在setTimeout中调用ajaxBanner（'hide'）而不是传入函数引用。将ajaxBanner（'hide'）包装在匿名函数中将解决问题：

 setTimeout(function() { ajaxBanner('hide'); }, 2000);

您可以在JavaScript控制台中执行解释/测试：

查看区别的一种方法是将其粘贴到Firebug控制台中并运行它：

不可

// alert fires in 5 seconds setTimeout(function() { alert('hide'); }, 5000);

<强>为：

// alert fires right away, despite the 5 second delay setTimeout(alert('hide'), 5000);

UPDATE：请注意，我没有将setTimeout事件分配给变量，因为问题中的上述代码示例中不需要它。

Answer 3

var ajaxBanner_callback = function (){};
function ajaxBanner(action, confirmMsg) {

  if (action == 'show') {
      var ajaxBanner_callback = function () {
        $('#msg').text('Loading...');
        $('#ajaxBanner').show();
      }
     if (!ajaxBanner_timeout) ajaxBanner_callback();
  }
  else if (action == 'hide') {
      var ajaxBanner_callback = function () {
        $('#ajaxBanner').fadeOut();
      }
     if (!ajaxBanner_timeout) ajaxBanner_callback();
  }
  else if (confirmMsg == true) {
      $('#ajaxBanner').show();
      ajaxBanner_timeout = setTimeout(function () {
        ajaxBanner_callback();
        clearTimeout(ajaxBanner_timeout);
        ajaxBanner_callback = function (){};
      }, 2000);
  }
};

如果需要，您可以对confirmMsg执行相同操作。

调查$.queue()

可能很有用

jQuery - 用超时构建横幅

3 个答案: