javascript - 为什么 setInterval() 中的参数始终不发送到函数？

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

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

您(可能)可以在 my personal site 看到正在运行的错误。

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

我该如何解决这个问题？

感谢任何查看/发布此主题的人!我希望这个问题能为其他人提供一个很好的引用。

Answer 1

问题是，一旦您将“ajaxStart”处理程序绑定(bind)到容器，它将在该容器的每个 ajax 调用上执行。也就是说，第一次使用 getPosts(true) 调用它时，它将创建绑定(bind)。下次您使用 getPosts(false) 调用它时，它不会沿着 if 路径走下去，但绑定(bind)仍然存在，因此当您执行 ajax 调用时，处理程序仍然会执行- 并且处理程序没有任何条件逻辑。 (实际上，我相信您最终会在“ajaxStart”事件上获得多个绑定(bind)，每次调用 getPosts(true) 时都会创建一个绑定(bind)，但它们可能并不引人注目，因为它们都只是这样做相同的内容覆盖相同的 html。)

为什么不做这样的事情:

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

  // Actual ajax call here
}

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