>

this.progress 를 듣고 싶습니다  변하기 쉬운. 변경 될 때마다 차트 로딩 비율과 진행률 막대 로딩 비율이 업데이트되어야합니다.

.change 를 사용해 보았습니다  내 bindEvents() 에서  섹션이지만 .change 를 적용하는 것이 유효하지 않다는 오류가 발생했습니다.  변수에 대한 함수 (요소에서만 작동)

그래서 이 ( cacheDom 의 마지막 변수 참조) ) :

(function() {
    const qwData = {
        // Initialize functions
        init: function() {
            this.cacheDom();
            this.bindEvents();
        },
        // Cache vars 
        cacheDom: function() {
            this.dataDisplayed  = false;
            this.countUsers     = <?php echo $_SESSION['all_users_count_real']; ?>;
            this.$form          = $('#frm_reportit');
            this.start_date     = this.$form[0][9].value;
            this.end_date       = this.$form[0][10].value;
            this.dateCount      = this.countDays(this.start_date, this.end_date);
            this.show           = document.querySelector('#btn-show');
            this.downloadBtn    = document.querySelector('#download_summary_button');
            this.$dataContainer = $('#qw-data-container');
            this.$qwTable       = $('#qwtable');
            this.$qwTbody       = this.$qwTable.find('tbody');
            this.qwChart        = echarts.init(document.getElementById('main-chart'));
            this.progressBar    = document.querySelector('.progress-bar');
            this.progress       = function(){
                var progressPrecent = 0;
                return {
                    getProgress: function () {
                      return progressPrecent;
                    },
                    updateValue: function(progressPrecent) {
                        this.updateProgressTableChart(progressPrecent);
                    }
                }
            };
        },
        // Bind click events (or any events..)
        bindEvents: function() {
            var that = this;
            // On click "Show" BTN
            this.show.onclick = this.sendData.bind(this, this.start_date, this.end_date);
            // On Change inputs
            this.$form.change(function(){
                that.updateDatesInputs(this);
            });
            // On Change inputs
            /*this.progress.change(function(){
                // Show Chart Loading 
                that.qwChart.showLoading({ 
                    text: that.returnNumWithPrecent(that.progress)
                });
                that.setProgressBarValue(that.progress);
            });*/
        },
        // Get data, prevent submit defaults and submit. 
        sendData: function(sdate, edate, e) {
            e.preventDefault();
            let that = this;
            $.ajax({
                type: 'POST',
                url: "/potato/ajax.php?module=potato_module",
                dataType: 'json',
                data: {
                        start_ts: sdate,
                        stop_ts: edate, 
                        submitted: true
                },
                beforeSend: function() {
                    console.log(that.progress);
                    setTimeout(function (){
                      // Something you want delayed.
                    }, 1000);
                                    that.progress       = 50;
                    setTimeout(function (){
                      // Something you want delayed.
                    }, 2000);
                                    that.progress       = 60;

                    // that.setProgressBarValue(that.progress);
                    // Show Chart Loading 
                    that.qwChart.showLoading({ 
                        color: '#00b0f0'/*, 
                        text: that.returnNumWithPrecent(that.progress)*/
                    });
                    // If data div isn't displayed
                    if (!that.dataDisplayed) {
                        // Show divs loading
                        that.showMainDiv();
                    } else {
                        that.$qwTbody.slideUp('fast');
                        that.$qwTbody.html('');
                    }
                },
                complete: function(){
                },
                success: function(result){
                }
            });
            that.dataDisplayed = true;
        }, 
        ...........
        ......................
        ...................................
        ...............................................
})();

console.log(this.progress) 의 콘솔에서이 오류가 계속 발생합니다.  

undefined

  • 답변 # 1

    자신의 setter와 함께 defineProperty를 사용할 수 있습니다.

       (function() {
        const qwData = {
            // Initialize functions
            init: function() {
                this.cacheDom();
                this.bindEvents();
            },
            // Cache vars 
            cacheDom: function() {
                this.dataDisplayed  = false;
                this.countUsers     = <?php echo $_SESSION['all_users_count_real']; ?>;
                this.$form          = $('#frm_reportit');
                this.start_date     = this.$form[0][9].value;
                this.end_date       = this.$form[0][10].value;
                this.dateCount      = this.countDays(this.start_date, this.end_date);
                this.show           = document.querySelector('#btn-show');
                this.downloadBtn    = document.querySelector('#download_summary_button');
                this.$dataContainer = $('#qw-data-container');
                this.$qwTable       = $('#qwtable');
                this.$qwTbody       = this.$qwTable.find('tbody');
                this.qwChart        = echarts.init(document.getElementById('main-chart'));
                this.progressBar    = document.querySelector('.progress-bar');
                Object.defineProperty(this, "progress", {
                    get: () => {
                       return this.progressPrecent || 0;
                    },
                    set: (value) => {
                        if(value != this.progressPrecent){
                          this.updateProgressTableChart(value);
                          this.progressPrecent = value;
                        }
                    }
                });
            },
            // Bind click events (or any events..)
            bindEvents: function() {
                var that = this;
                // On click "Show" BTN
                this.show.onclick = this.sendData.bind(this, this.start_date, this.end_date);
                // On Change inputs
                this.$form.change(function(){
                    that.updateDatesInputs(this);
                });
                // On Change inputs
                /*this.progress.change(function(){
                    // Show Chart Loading 
                    that.qwChart.showLoading({ 
                        text: that.returnNumWithPrecent(that.progress)
                    });
                    that.setProgressBarValue(that.progress);
                });*/
            },
            // Get data, prevent submit defaults and submit. 
            sendData: function(sdate, edate, e) {
                e.preventDefault();
                let that = this;
                $.ajax({
                    type: 'POST',
                    url: "/potato/ajax.php?module=potato_module",
                    dataType: 'json',
                    data: {
                            start_ts: sdate,
                            stop_ts: edate, 
                            submitted: true
                    },
                    beforeSend: function() {
                        console.log(that.progress);
                        setTimeout(function (){
                          // Something you want delayed.
                        }, 1000);
                                        that.progress       = 50;
                        setTimeout(function (){
                          // Something you want delayed.
                        }, 2000);
                                        that.progress       = 60;
    
                        // that.setProgressBarValue(that.progress);
                        // Show Chart Loading 
                        that.qwChart.showLoading({ 
                            color: '#00b0f0'/*, 
                            text: that.returnNumWithPrecent(that.progress)*/
                        });
                        // If data div isn't displayed
                        if (!that.dataDisplayed) {
                            // Show divs loading
                            that.showMainDiv();
                        } else {
                            that.$qwTbody.slideUp('fast');
                            that.$qwTbody.html('');
                        }
                    },
                    complete: function(){
                    },
                    success: function(result){
                    }
                });
                that.dataDisplayed = true;
            }, 
            ...........
            ......................
            ...................................
            ...............................................
    })();
    
    

관련 자료

  • 이전 spring - MessageDeliveryException을 피하는 방법?
  • 다음 emacs - 조직 모드에서 Shift + 커서가 정상적으로 작동하지 않습니다