如何与ajax调用并行运行进度条(每x秒获得％增量)?

问题描述

这是我的对象的一部分:

This is part of my object:

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.setProgressBarValue(value);
                  this.qwChartProgress = this.returnNumWithPrecent(value);
                }
            }
        });
        this.qwChartProgress= this.progress;
    },
    // Bind click events (or any events..)
    bindEvents: function() {

        var that = this;

        // On click "Show" BTN
        this.show.onclick = this.sendData.bind(this);

        // On Change inputs
        this.$form.change(function(){
            that.updateDatesInputs(this);
        });

    },

sendData: function(e) {
    e.preventDefault();
    let that = this;

    $.ajax({
        type: 'POST',
        url: "/test/ajax.php?module=test_module",
        dataType: 'json',
        data: {
                start_ts: that.start_date,
                stop_ts: that.end_date, 
                submitted: true
        },
        beforeSend: function() {

            // Show Chart Loading 
            that.qwChart.showLoading({ 
                color: '#00b0f0', 
                // text: that.returnNumWithPrecent(that.progress)
                text: that.qwChartProgress
            });

            // If data div isn't displayed
            if (!that.dataDisplayed) {
                // Show divs loading
                that.showMainDiv();
            } else {
                that.$qwTbody.slideUp('fast');
                that.$qwTbody.html('');
            }
        },
        complete: function(){


            let timer = setInterval(that.incrementProgress, 500);

        },
        success: function(result){

            // Set progressbar to 100%
            that.setProgressBarTo100();

            // Show Download Button
            that.downloadBtn.style.display = 'inline-block';

            // Insert Chart Data
            that.insertChartData(result);

            // Insert Table Data
            that.insertTableData(result);
        }
    });

    that.dataDisplayed = true;
},
// Insert Data to Table
incrementProgress: function(){
    this.progress += 10;
},
..... 
.............
....................

我正在尝试使 this.progress 每0.5秒递增10％(通过在 this.progress 中添加10).我不确定该在哪里以及如何做.我尝试将其添加到 beforeSend:和 complete:中，但我得到的只是0％的进度条，没有任何时间延迟.如何写这个正确的方法?

I am trying to get this.progress to get incremented every 0.5 seconds by 10% (by adding 10 to this.progress). I'm not sure where to do that, and how. I tried adding it to beforeSend: and complete: but all i get is a 0% progress bar without any time delays. How is the proper way to write this?

推荐答案

Object.defineProperty(this, "progress", {
            get: () => {
               return this.progressPrecent || 0;
            },
            set: (value) => {

                if(value != this.progressPrecent){
                  this.progressPrecent = value;
                  this.setProgressBarValue(value);
                  this.qwChartProgress = this.returnNumWithPrecent(value);
                }
            }
        });

这是问题 this.progressPrecent = value;

它始终为0，因为获取值时未在 this.progressPrecent 中进行设置.

It was always 0 because when getting the value it didn't set it in this.progressPrecent.

这篇关于如何与ajax调用并行运行进度条(每x秒获得％增量)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！