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

发布于 2024-11-26 19:32:26 字数 1004 浏览 1 评论 0 原文

我有一个通过 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);

您可以(可能)在 我的个人网站

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

我该如何应对?

感谢任何查看/发布此主题的人!我希望这个问题能够成为其他人的一个很好的参考。

I have a page that automatically refreshes content via Ajax. I want this to be subtle so I do not want to display my loading gif during automatic page refreshed. So I did something like this with my getPosts function (unnecessary code cut out for succinctness)

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

I know the center tag is deprecated, just a shameless shortcut.
And then I will set the interval like setInterval(function() { getPosts(false); }, 10000);
Therefore my automated calls will not trigger the image to display
All my manual refreshes will then call it like this getPosts(true);

You can (probably) see the bug in action at my personal site

The problem is, the setInterval function seems to use the image bool from the latest function call. So it does not display the image at first during automated calls, but after I click a manual refresh, it starts showing the image during each call.

How can I combat this?

Thanks for anyone who views/posts this topic! I hope this question becomes a good reference to others.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

千鲤 2024-12-03 19:32:26

问题是,一旦您将“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);

The problem is that once you've bound your "ajaxStart" handler to the container it will execute on every ajax call for that container. That is, the first time you call it with getPosts(true) it will create the binding. The next time you call it with getPosts(false) it doesn't go down that if path but the binding still exists so when you do your ajax call the handler still executes - and the handler doesn't doesn't have any conditional logic. (Actually, I believe you'll end up with multiple bindings on the "ajaxStart" event, one created every time you call getPosts(true), but they're probably not noticable since they all just do the same thing overwriting the same html.)

Why not do something like this:

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

  // Actual ajax call here
}

setInterval(function() { getPosts(false); }, 10000);
献世佛 2024-12-03 19:32:26

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

你需要做的是这样的:

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

Because after the first manual refresh you have attached a event handler "ajaxstart" which is to show the image when a ajax call starts. Now this event handler is there even in case you call the function with image = false. It will get triggered on all ajax calls.

What you need to do is something like:

 $("#postcontainer").bind("ajaxStart", function(){
                        $(this).html("<center><img src='ajax-loader.gif' /></center>")
          //Remove event handler
          $(this).unbind("ajaxStart");
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文