OOP JS:函数重复递增日期，我不知道为什么? [英] OOP JS: function incrementing date repeatedly, and I don't know why?

问题描述

继我之前的线程之后，我继续设计以下对象.

Following on from my previous thread, I went on to design the following Objects.

/* --- LEAP Namespace --- */
    var LEAP = {};

/* --- LEAP.Schedule Object --- */
    LEAP.Schedule = function(){//init
      this.weeks = [];
      this.calculateWeeks();
    };

    LEAP.Schedule.prototype.pad = function (n) {
        return n>9 ? n : "0"+n;
    };

    LEAP.Schedule.prototype.calculateWeeks = function(){
        this.date = new Date ( 2011, 8, 5 ); // First week of new school year
        this.num = 36; // Calendar number of this week
        this.weeks.push(new LEAP.Schedule.week(this.date, this.num));

        for (var i = 1; i < 51; i++) {
            var week = i * 7;
            var updated_date = new Date ();
            updated_date.setDate(this.date.getDate() + week);

            if (this.num > 51) {
                this.num = 0;
            }
            this.num++;

            this.weeks.push(new LEAP.Schedule.week(updated_date, this.num));
        }
    };

    LEAP.Schedule.prototype.getWeeks = function(){
        return this.weeks;
    };


/* --- LEAP.Schedule.week Object --- */
    LEAP.Schedule.week = function(n_date, n_week){
        this.week = n_week;
        this.date = n_date;

        this.year = this.date.getFullYear();
        var JSMonth = this.date.getMonth();
        JSMonth += 1;
        this.month = JSMonth;
        this.day = this.date.getDate();
    };

    LEAP.Schedule.week.prototype.getJSDate = function(){
        return this.date;
    };

    LEAP.Schedule.week.prototype.getStartDate = function(){
        return this.year + "-" + LEAP.Schedule.pad(this.month) + "-" + LEAP.Schedule.pad(this.day);
    };

    LEAP.Schedule.week.prototype.getEndDate = function(){
        var EndOfWeek = this.date;
        EndOfWeek.setDate(this.date.getDate() + 6);

        var year = EndOfWeek.getFullYear();
        var month = LEAP.Schedule.pad(EndOfWeek.getMonth() + 1);
        var day = LEAP.Schedule.pad(EndOfWeek.getDate());

        return year + "-" + month + "-" + day;
    };

    LEAP.Schedule.week.prototype.getLabel = function(){
        return "Week " + this.week + ": " + this.day + (this.day==1||this.day==21||this.day==31?"st":this.day==2||this.day==22?"nd":this.day==3||this.day==23?"rd":"th") + " " + ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][this.month-1] + " " + this.year;
    };

我现在使用 <SELECT> 框来过滤一些其他数据，除了每次 $('#filter').change() 事件被触发，日期正在递增.

I'm now using a <SELECT> box to filter some other data, which works successfully, apart from the fact that every time the $('#filter').change() event is triggered, the dates are being incremented.

    WeeklyUpdate.init = function() {
        UWA.Data.getJson(WeeklyUpdate.URL + "?cmd=getPointTotals", WeeklyUpdate.getTotalPoints);

        var Scheduleobject = new LEAP.Schedule();
        var weeks = Scheduleobject.getWeeks();
        WeeklyUpdate.displayWeekFilter(weeks);
    }

    WeeklyUpdate.displayWeekFilter = function(weeks) {
        var WeekFilterDisplayHTML = '<select id="filter"><option>Click here</option><option value="all">- All, to date</option>';
        var now = new Date();

        for (var i = 0; i < weeks.length; i++) {
            if (weeks[i].getJSDate() < now) {
                var label = weeks[i].getLabel();
                WeekFilterDisplayHTML += '<option value="' + i + '">' + label + '</option>';
            }
        }

        WeekFilterDisplayHTML += '</select>';
        $('div#filter').html(WeekFilterDisplayHTML);

        //WeeklyUpdate.filterPointTotalsByStaff( $(this).val() )
        $("select#filter").change( function() { WeeklyUpdate.filterPointTotalsByStaff( weeks, $(this).val() ) } );
    }

    WeeklyUpdate.filterPointTotalsByStaff = function(weeks, val) {
        if (val >= 0 && val != "all") {
            var StartDate = weeks[val].getStartDate();
            var EndDate = weeks[val].getEndDate();

如果我在这些变量之后添加 alert(StartDate + '//' + EndDate);，我可以看到 EndDate 每次都在递增，而不是递增一次然后一直返回无论从 SELECT 框中选择了多少次，都将返回正确的 EndDate.另一方面，StartDate 每次都能正常工作.

If I add alert(StartDate + ' // ' + EndDate); after those variables, I can see that the EndDate is being incremented every time, rather than being incremented once and then consistently returning the correct EndDate regardless of how many times it is selected from the SELECT box. The StartDate on the other hand works correctly every time.

应该发生的是this.date(它返回一个被请求的那一周的JS日期对象)应该是一周的开始，然后getEndDate() 函数应该将该日期增加 6 天，并以 MySQL 兼容的格式返回正确的日期.每次从 SELECT 框中选择 时，它都不应该增加；它应该总是返回相同的日期.

What should happen is that this.date (which returns a JS date Object for the week being requested) should be the start of the week, then the getEndDate() function should increment that date by 6 days and return the correct date in a MySQL-compatible format. This shouldn't increment every time its <OPTION> is selected from the SELECT box; it should always return the same date.

我猜这与我使用 EndOfWeek = this.date; 的方式有关，但我不明白为什么或如何.

I'm guessing that it's something to do with the way I've used EndOfWeek = this.date;, but I don't understand why or how.

再次感谢.

推荐答案

可能在这里无关紧要，但无论如何都是糟糕的形式:

Probably doesn't matter here but is bad form anyway:

      for (i = 1; i < 51; i++) {

应该声明变量 i.

在声明中(我的包装):

In the statement (my wrapping):

$("select#filter").change( function() { 
   WeeklyUpdate.filterPointTotalsByStaff( weeks, $(this).val() )
});

您没有显示 weeks 是如何初始化或分配值的.LEAP.Schedule 实例有一个 weeks 属性，但在它上面是在全局变量的上下文中使用的.

You do not show how weeks is initialised or assigned a value. There is a weeks property of LEAP.Schedule instances, but above it is used in the context of a global variable.

这篇关于OOP JS:函数重复递增日期，我不知道为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！