Question

我有一个页面可以从数据库中加载用户列表（并通过模板中的服务器端代码填充列表。）

它们是一段加载速度较慢的代码，因此我想通过AJAX调用它，以便在这些请求进入时页面的其余部分可用。

现在，每个用户都有一个“加载/刷新”按钮用于此数据：

  <button type="button" class="changes_refresh_btn"
          id="changes_refresh_btn_{{username}}"
          data-username="{{username}}">Load Slow Datas</button>

然后我使用

添加（并调用）onClick处理程序

  $(".changes_refresh_btn").each(
    function(index, element) {
      $(this).click(loadAttributeChanges2).trigger("click");
  });

这是由loadAttributeChanges2泛型函数提供的：

      function loadAttributeChanges2() {
        btn = $(this); // we close over this variable in the ajax call below

        /* username is kept in a data-username html attribute */
        username = btn.data("username"); 

        console.log("Loading data for " + username);
        btn.html('Loading...');
        $.ajax({
            url:"/api/changes/" + username,
            success:function(data) {
               console.log("data received for "+username);
            }
          );
        console.log("End loadAttributeChanges2 for " + username);
   }

单击任何按钮都可以正常工作。但是，当多个onClick事件为.trigger("click")时，它们会正常启动，但所有返回都好像username和btn的值被归结为最后一个值，因此控制台日志看起来像这样：

Loading data for userA 
End loadAttributeChanges2 for userA
Loading data for userB 
End loadAttributeChanges2 for userB
Loading data for userC
End loadAttributeChanges2 for userC
data received for userC
data received for userC
data received for userC

username变量发生了什么？

并行使用jQuery $ .ajax（）方法时出现奇怪的变量范围问题

0 个答案: