javascript - 当用户取消选择 div 时停止代码运行

Question

我试图在用户取消选择他们选择的 div 时停止运行 setInterval 函数，但我无法让它工作。有什么想法吗？`

我已经尝试了清除间隔，但没有用。我也尝试过使用 this 中的 cvalue，但它不会在代码中更新。

 $(document).on("click",".profTemp", function()
                { 
                  var pollUser;
                  if(!$(this).hasClass('selected'))
                  {
                    var selectedUser;
                    var previous = null;
                    var current = null;
                    var assigned = false;

                    selectedUser = $(this).children('span').text();
                    selectedUser = selectedUser.trim();



                    //selectedUser = $(this).children('span').text();
                    console.log(selectedUser);
                    $(this).toggleClass('selected');

                    //selectedUser = selectedUser.trim();

                    pollUser = setInterval(function()
                    {

                      console.log(selectedUser);
                      $.ajax({
                        url: '/getJSON',
                        dataType: 'json',
                        success: function(response) {
                          console.log(response + "84897348");
                          obj = JSON.parse(response);
                          console.log(selectedUser + "inside success");

                          var changeTo;
                          var deviceID;

                          console.log(current + "current");
                            for(var i = 0; i < obj.clients.length; i++)
                            {
                              if((selectedUser == obj.clients[i].userName) && (assigned == false))
                              {
                                console.log(selectedUser + " inside if");
                                current = JSON.stringify(obj.clients[i]);
                                changeTo = obj.clients[i].uri;
                                device = obj.clients[i].deviceID
                                assigned = true;
                              }
                            }
                            assigned = false;

                            console.log(current + " current");
                            console.log(previous + "previous");

                            if(previous !== current)
                            {          

                              console.log("ARE WE INSIDE HERE");

                              $.ajax({
                                url: 'https://api.spotify.com/v1/me/player/play',
                                contentType: 'application/json',
                                type: 'PUT',
                                dataType: 'json',
                                headers: {
                                  'Authorization': 'Bearer ' + access_token
                                },
                                data: JSON.stringify({"uris":[changeTo], "device_id":device, "offset": { "uri":changeTo} }),
                                success: function(response) {
                                  console.log(response);
                                }
                              });
                            }
                          }
                        });
                      previous = current;
                      console.log(selectedUser);
                    }, 2000);
                  }

                  else if($(this).hasClass('selected'))
                  {
                    $(this).toggleClass('selected');
                    console.log("not selected");
                    clearInterval(pollUser);
                  }       

                }); 

`

Answer 1

var pollUser 是您期望 setInterval 的 ID 所在的位置，对吗？因为稍后在函数中，您执行 pollUser = setInterval(function()... 。请参阅 docs 关于 setInterval。

这是行不通的，因为在 .profTemp 的每次 click 上，您都在通过执行 var 创建一个新的 pollUser 变量pollUser 在你的函数的顶部。

如果您希望 setInterval 的 ID 实际保存，您应该将其保存到 .profTemp 点击处理函数范围之外的变量中，因此它会被维护。

Some more resources on function scope

及"var"