调试一段JS代码运行时报TypeError: s is undefined 错误,浏览器为火狐,为了寻找错误点,进行断点调试,使用FireBug进行调试,进行断点调试却不报错,十分不解!
var province, city, district;
$.getJSON('province.json',function (data) {
alert(data);
province = data;
});
$.getJSON('city.json',function (data) {
city = data;
});
$.getJSON('district.json',function (data) {
district = data;
})
var Game = function (province,city,district) {
//组件数据获取
this.A = province;
this.B = city;
this.C = district;
console.table(this.A);
console.table(this.B);
console.table(this.C);
//获取显示组件
this.a = $('#a');
this.b = $('#b');
this.c = $('#c');
this.start();
}
Game.prototype = {
start:function(){
//组件初始化
this.class_A();
this.monitor();
},
class_A:function(){
//初始化顶层选择框
var content = '';
var s = this.A;
for (var i =0; i < s.length; i++) {
content += "";
}
this.a.html(content);
},
class_B:function(x){
var content = '';
var s = this.B[x];
for (var i = 0; i < s.length; i++) {
content += "";
}
this.b.html(content);
},
class_C:function(x,y){
var content = '';
var s = this.C[x][y];
for (var i = 0; i < s.length; i++) {
content += "";
}
this.c.html(content);
},
monitor:function(){
//事件监听
var self = this;
this.a.change(function(){
var x = self.a.val();
self.class_B(x);
self.class_C(x,0);
});
this.b.change(function(){
var x = self.a.val();
var y = self.b.val();
self.class_C(x,y);
});
}
};
var game = new Game(province,city,district);
通常我碰到这种情况会先从异步同步这个方向分析,显然你的就是这个问题
JS是异步语言, 不会等待$.getJSON获取到值后才执行下面的代码, 解决方法是利用回调或者ES6的yield语法
因为你这些数据都是异步获取的,这么说吧,假设这段代码执行需要1ms,而$.getJSON返回结果要2ms,所以正常执行的话会获取不到值,而设置断点会相当于等到$.getJSON获取到值再执行。