javascript - 在火狐中运行一段JS，正常运行时报错，单步调试的时候却不报错？

问题描述

问 题

调试一段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 += "<option value='" + i + "'>" + s[i] + "</option>";
                    }
                this.a.html(content);
            },
            class_B:function(x){
                var content = '';
                var s = this.B[x];
                for (var i = 0; i < s.length; i++) {
                    content += "<option value='" + i + "'>" + s[i] + "</option>";
                }
                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 += "<option value='" + i + "'>" + s[i] + "</option>";
                }
                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);

运行错误

调试截图

解决方案

因为你这些数据都是异步获取的，这么说吧，假设这段代码执行需要1ms，而$.getJSON返回结果要2ms，所以正常执行的话会获取不到值，而设置断点会相当于等到$.getJSON获取到值再执行。

这篇关于javascript - 在火狐中运行一段JS，正常运行时报错，单步调试的时候却不报错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！