异步函数回调返回数据为undefined及回调非函数错误求助

我来帮你逐一解决这两个技术问题：

问题1：TypeError: callback is not a function #

这个错误的原因很直接：你调用GetData()的时候没有传入callback参数，但函数内部的AJAX成功回调里尝试执行callback(response, passdata)，此时callback是undefined，自然会触发这个类型错误。

另外，你定义的listData函数是在$(document).ready()的回调内部，要确保调用GetData时，这个函数已经被定义，并且能被正确传递。

问题2：异步函数返回数据为undefined #

AJAX是异步操作，也就是说GetData函数会在发起AJAX请求后立刻返回，不会等待请求完成。所以你直接用var getData = GetData()去接收返回值，拿到的只能是undefined——因为此时AJAX还没拿到服务器响应。

正确的做法是利用你已经设计的callback参数，把数据处理逻辑（也就是listData）传递给GetData，让AJAX请求完成后自动调用这个函数处理数据。

修正后的完整代码 #

第一个JS文件的GetData函数（添加健壮性判断） #

function GetData(callback, passdata) { 
 $.ajax({ 
 type: 'GET', 
 url: "https://jsonplaceholder.typicode.com/users", 
 success: function (response) { 
 console.log(response); 
 // 先判断callback是否为函数，避免意外报错
 if (typeof callback === 'function') {
   callback(response, passdata);
 }
 } 
 }); 
}

第二个JS文件的展示代码（修正调用逻辑与渲染细节） #

$(document).ready(function () { 
 var $data = $('#dataDisplay'); 

 // 先定义数据处理函数
 function listData(response, passdata) { 
 var data = response; 
 // 清空容器，避免重复渲染数据
 $data.empty();
 $.each(data, function (i, users) { 
   // 直接编写正常HTML标签，无需转义
   $data.append(`<li>
     <span>${users.name}</span><br>
     <span>${users.email}</span>
     <i class="material-icons delete">delete</i>
     <i class="material-icons edit">edit</i>
   </li>`); 
 }); 
 } 

 // 调用GetData，传入listData作为回调函数
 // 如果需要传递额外数据，可在第二个参数传入，例如：GetData(listData, "自定义额外参数")
 GetData(listData); 
});

额外优化说明 #

1. 在GetData中添加了typeof callback === 'function'的判断，即使不小心漏传回调参数，也不会直接抛出错误，代码更健壮。
2. 将删除、编辑图标直接嵌入每个<li>的HTML结构中，避免后续统一append操作导致图标重复添加到所有列表项。
3. 渲染前调用$data.empty()，防止多次调用GetData时数据重复累加。

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