javascript - 第一次调用函数不会按预期工作，但下次可以工作

Question

这是我的代码:

treksID=[];
recommendedTrekId=2;

$(document).ready(function(){
    showTrek('random');
    showTrek(recommendedTrekId);
});

function showTrek(filter){
    if (filter=="random"){
        param={action:'getShortTrek'};
        tagId="#random";
        index=1;
    }
    else {
        param={action:'getShortTrek', Trek_Id:filter};
        tagId="#recommend";
        index=0;
    }
    $.getJSON('php/treks.php',
        param,
        function(data){
            $(tagId).find('h3').html(data[0].Trek_Name);//PROBLEM
            treksID[index]=data[0].Trek_Id;//PROBLEM
            if (filter=='random') {alert('debug'); test=data;}//DEBUG
        }
    );
}   

第一次调用 showTrek 时，它会按预期执行所有操作，但第二次调用时，两条有问题的行(标有//PROBLEM 标签)不会起作用。 之后，当我在浏览器控制台中调用 showTrek('random'); 时，它也确实有效。 奇怪的是数据确实包含正确的对象(通过查看测试检查)。

当编程这样做时我感觉有点疯狂，任何人都可以看到我的问题吗？

Answer 1

那是因为您通过忘记 var 关键字将变量 param、tagId 和 index 声明为全局变量。这使得它们的第一个值被第二次调用 showTrek 删除，并且这个调用发生在 before 您传递给 $.getJSON 的第一个回调被执行，因为AJAX 调用是异步的。

你应该简单地添加

var param, tagId, index;

在 showTrek 函数的开头。