setTimeout的替代方法？

Question

In the code below I am getting data from the response parameter and then I'm rendering a graph. Then I am exporting by getting a base64 string for the image from the imgData parameter and then I am setting the base64 string in the session using an AJAX call.

After that I'm making another AJAX call to create a report. In this AJAX call I make use of the image stored in the session as a base64 string. While printing the report I am getting a partial image. This is due to a large part of the data in the setTimeout function not working as expected in some cases.

When I remove the setTimeout function the image is not generating in the report because it makes another AJAX call before it completes the task.

Can anyone provide me a solution? Thanks in advance.

function LoadChart(response, callback) {
  if (response.length > 1) {
    //var aData = JSON.parse(response);
    document.getElementById('loading').style.display = "block";

    var aData = $.parseJSON(response);
    var chartData = [];
    $.each(aData, function(inx, val) {
      var obj = {};
      obj.AVARating = val.AVARating;
      obj.Per = val.Per;
      //obj.color = "#696969";
      chartData.push(obj);
    });

    var assessmentId = $('#hdnAssessmentId').val();
    var siteName = $('#hdnSiteName').val();
    var companyName = $('#hdnCompanyDesc').val();
    var countryName = $('#hdnCountryDesc').val();
    var latitude = $('#hdnLatitude').val();
    var longitude = $('#hdnLongitude').val();
    var division = $('#hdnDivisionDesc').val();
    var reportedDate = $('#hdnReportedDate').val();
    var username = $('#hdnWindowsID').val();
    var countryCode = $('#hdnCountryCode').val();
    var CompanyCode = $('#hdnCompanyCode').val();
    var SiteCode = $('#hdnSiteCode').val();
    var DivisionCode = $('#hdnDivisionCode').val();
    //am4core.disposeAllCharts();
    var chart = am4core.create("donutchart", am4charts.RadarChart);
    //chart.dataSource.url =   'VATReportGeneration.aspx?key=1&windowsId=' + username + '&divisionCode=' + DivisionCode + '&countryCode=' + countryCode + '&companyCode=' + CompanyCode + '&siteCode=' + SiteCode + '&assessmentId=' + assessmentId;
    chart.data = chartData;
    //chart.data = response;

    /* Add data */
    //chart.data = [{
    //    "AVARating": "Perimeter",
    //    "Per": 10
    //}, {
    //    "AVARating": "CCTV",
    //    "Per": 12
    //}, {
    //    "AVARating": "Intrusion Detection",
    //    "Per": 30
    //}, {
    //    "AVARating": "Information Protection",
    //    "Per": 40
    //}, {
    //    "AVARating": "Guarded forces",
    //    "Per": 50
    //}, {
    //    "AVARating": "Safe Haven",
    //    "Per": 60
    //}, {
    //    "AVARating": "Control Room",
    //    "Per": 70
    //}, {
    //    "AVARating": "Security Plan",
    //    "Per": 80
    //}, {
    //    "AVARating": "Procedures",
    //    "Per": 90
    //}];

    /* Create axes */
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "AVARating";

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.axisFills.template.fill = chart.colors.getIndex(2);
    valueAxis.renderer.axisFills.template.fillOpacity = 0.05;
    valueAxis.renderer.gridType = "polygons";
    valueAxis.min = 0;
    valueAxis.max = 100;
    valueAxis.renderer.minGridDistance = 10;

    /* Create and configure series */
    var series = chart.series.push(new am4charts.RadarSeries());
    series.dataFields.valueY = "Per";
    series.dataFields.categoryX = "AVARating";
    series.strokeWidth = 3;
    series.fillOpacity = 0.3;

    var circleBullet = series.bullets.push(new am4charts.CircleBullet());
    circleBullet.circle.stroke = am4core.color("#fff");
    circleBullet.circle.strokeWidth = 2;

    setTimeout(function() {
      chart.exporting.getImage("png").then(function(imgData) {
        //console.log(imgData); // contains exported image data
        console.log(imgData);

        var image = imgData.replace('data:image/png;base64,', '');

        $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: "VATReportGeneration.aspx/SetImageInSession",
          data: JSON.stringify({
            "image": image
          }),
          dataType: "json",
          success: function(data) {
            if (data != '') {
              // document.getElementById('loading').style.display = "none";
              var url = "../../ReportHandler/VATConfigurationFileHandler.aspx";
              var file = url + '?VAT_Report=VAT_Report&assessmentId=' + assessmentId + '&siteName=' + siteName + '&companyName=' + companyName + '&countryName=' + countryName + '&latitude=' + latitude + '&longitude=' + longitude + '&division=' + division + '&reportedDate=' + reportedDate; //+'&image='+txt;
              $get("exporthandler").src = file;
              chart.dispose();
              document.getElementById('loading').style.display = "none";
            }
          },
          error: function(data) { }
        });
      });
    }, 5000);
  }
}

Answer 1

You can use setInterval

 setInterval(function() {
   // Code Here
 }, 3000);

the 3000ms is the timeout of the interval