Question

我有一个页面可以通过Ajax自动刷新内容。我希望这是微妙的，所以我不想在自动页面刷新期间显示我的加载gif。所以我用我的getPosts函数做了类似的事情（为了简洁而删除了不必要的代码）

function getPosts(image) 
            {
                //loading icon while getPosts
                if (image)
                {
                    $("#postcontainer").bind("ajaxStart", function(){
                        $(this).html("<center><img src='ajax-loader.gif' /></center>");
                });
                } //... ajax call, etc. don't worry about syntax errors, they aren't in real code

我知道中心标签已被弃用，只是一个无耻的快捷方式。然后我会设置像setInterval(function() { getPosts(false); }, 10000);这样的间隔因此，我的自动调用不会触发图像显示然后我的所有手动刷新都会像getPosts(true);

一样调用它

你可以（可能）在my personal site

看到错误

问题是，setInterval函数似乎使用来自最新函数调用的图像bool。因此，在自动调用期间，它不会首先显示图像，但在我单击手动刷新后，它会在每次调用期间开始显示图像。

我该如何对抗这个？

感谢所有观看/发布此主题的人！我希望这个问题能成为别人的好参考。

Answer 1

因为在第一次手动刷新之后，您附加了一个事件处理程序“ajaxstart”，用于在ajax调用启动时显示图像。现在，即使您使用image = false调用函数，此事件处理程序也会存在。它将在所有ajax调用中被触发。

您需要做的是：

 $("#postcontainer").bind("ajaxStart", function(){
                        $(this).html("<center><img src='ajax-loader.gif' /></center>")
          //Remove event handler
          $(this).unbind("ajaxStart");
});

Answer 2

问题是，一旦你将“ajaxStart”处理程序绑定到容器，它将在每个容器的ajax调用上执行。也就是说，第一次使用getPosts(true)调用它时，它将创建绑定。下次用getPosts(false)调用它时，它不会向下if路径，但绑定仍然存在，所以当你执行ajax调用时，处理程序仍然执行 - 并且处理程序不会执行有任何条件逻辑。（实际上，我相信你最终会对“ajaxStart”事件进行多次绑定，每次调用getPosts(true)时都会创建一个，但是它们可能并不明显，因为它们都只是做同样的事情来覆盖它们HTML）

为什么不这样做：

function getPosts(image) {
  if (image) {
    $("#postcontainer").html("<center><img src='ajax-loader.gif' /></center>");
  }

  // Actual ajax call here
}

setInterval(function() { getPosts(false); }, 10000);

为什么参数不会一直发送到setInterval（）中的函数？

2 个答案: