调用函数内部同名函数时出现'Uncaught TypeError: sync_thing is not a function'错误

嗨，我一眼就揪出问题所在啦——你在函数内部的变量命名和函数本身重名了，这直接导致了这个类型错误。

让我给你拆解一下原因：

• 你定义了一个名为sync_thing的函数，然后在这个函数内部，又用var sync_thing = $.ajax(...)声明了一个同名变量。
• 在JavaScript的函数作用域里，变量声明会被提升到作用域顶部。这意味着当你第一次调用sync_thing()时，函数内部的sync_thing变量已经存在（只是还没被赋值为AJAX对象）。
• 当AJAX请求的success回调触发，你尝试再次调用sync_thing()时，这个变量已经被覆盖成了AJAX返回的jqXHR对象，它可不是函数，所以浏览器就抛出了那个错误。

修复方案 #

最简单的解决办法就是把内部的变量名改成别的，避免和函数名冲突。比如改成syncRequest：

$(document).ready( function() { 
  var sync_counter = 0; 
  sync_thing(); 

  function sync_thing() { 
    // 重命名变量，避免和函数名冲突
    var syncRequest = $.ajax({ 
      url: '../there_be_the_functions/sync_thingy.php', 
      success: function(response) { 
        if (response != 'done') { 
          sync_thing(); 
        } 
      } 
    }); 
  } 
});

额外优化建议 #

另外，为了避免同时存在多个未完成的AJAX请求（可能导致不必要的资源消耗），你可以添加一个请求取消的逻辑：

$(document).ready( function() { 
  var sync_counter = 0; 
  var syncRequest = null; // 用来保存当前的请求对象
  sync_thing(); 

  function sync_thing() { 
    // 如果有未完成的请求，先取消它
    if (syncRequest) {
      syncRequest.abort();
    }
    
    syncRequest = $.ajax({ 
      url: '../there_be_the_functions/sync_thingy.php', 
      success: function(response) { 
        if (response != 'done') { 
          sync_thing(); 
        } else {
          syncRequest = null; // 请求完成后重置变量
        }
      } 
    }); 
  } 
});

内容的提问来源于stack exchange，提问作者Konservin