Here is a snippet from 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;
},
// In order to achieve the result of incrementing `this.progress` by 10% every 0.5 seconds, we need to add it within the setInterval function in the `complete:` section of the AJAX call. By doing this, the value will increase by 10% at intervals of 0.5 seconds.
incrementProgress: function(){
this.progress += 10;
},
.....
.............
....................
I am attempting to continuously update this.progress by adding 10% to its value every 0.5 seconds. Despite trying different approaches such as adding it into the beforeSend: and complete:, I have only achieved a static 0% progress bar without any time delays. Can someone guide me on the correct way to implement this feature?