引导模式与 Firefox 一起使用，但在 Chrome 中不可用

Question

This is my code, it closes a modal after pressing a button, opens another one right after and executes a parsing function:

$('#BtnUpCsv').on('click', function (e) {
      $('#csvModal').modal('hide');
      $('#pBarModal').modal('show');
      Papa.parse(document.getElementById('csvinput').files[0], {...

In Firefox it works as intended but in Chrome the first modal won't close immediatly after the function is called and the parsing starts as it has some weird priority over the first two functions. After the parse is over the csvModal is closed and the pBarModal appears. I already tried adding a setTimeout but it messes with the parsing function.

Any idea why this happens?

EDIT: entire function

Papa.parse(document.getElementById('csvinput').files[0], {
        header: true,
        skipEmptyLines: true,
        complete: function(results) {
          pBarMax = results.data.length - 1;
          results.data.forEach(function (data) {
            const csvPcode = data.pcode;
            const csvAntiOx = data.AntiOx;
            const csvCalories = data.Calories;
            const csvCarbs = data.Carbs;
            const csvFats = data.Fats;
            const csvFibers = data.Fibers;
            const csvLipides = data.Lipides;
            const csvProteins = data.Proteins;
            const csvSat_fats = data.Sat_fats;
            const csvSodium = data.Sodium;
            const csvSugars = data.Sugars;

            //Update progress bar
            pBarPerc = ((iPbar/PbarMax) * 100).toFixed();
            $('#progressBar').text(+ pBarPerc + '%');
            $('#progressBar').attr('style','width:' + pBarPerc + '%');
            //console.log(pBarPerc);

            //Rpc requests
            $.ajax({
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: {
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'AntiOx',
                value: csvAntiOx
              },
              dataType: 'json'
            } );

            $.ajax({
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: {
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Calories',
                value: csvCalories
              },
              dataType: 'json'
            } );

            $.ajax({
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: {
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Carbs',
                value: csvCarbs
              },
              dataType: 'json'
            } );

            $.ajax({
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: {
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Fats',
                value: csvFats
              },
              dataType: 'json'
            } );

            $.ajax({
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: {
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Fibers',
                value: csvFibers
              },
              dataType: 'json'
            } );

            $.ajax({
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: {
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Lipides',
                value: csvLipides
              },
              dataType: 'json'
            } );

            $.ajax({
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: {
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Proteins',
                value: csvProteins
              },
              dataType: 'json'
            } );

            $.ajax({
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: {
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Sat_fats',
                value: csvSat_fats
              },
              dataType: 'json'
            } );

            $.ajax({
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: {
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Sodium',
                value: csvSodium
              },
              dataType: 'json'
            } );

            $.ajax({
              type: 'POST',
              url: '../contents/cbk-data-process.php',
              async: false,
              data: {
                method: 'prod-variable-saveby-name',
                node: <?php echo $node ?>,
                pcode: csvPcode,
                objectname: 'Sugars',
                value: csvSugars
              },
              dataType: 'json'
            } );
            iPbar++;
          } );
          //Reset progress bar on completition and modal when hidden
          let PbarResult = $('#pBarModalLabel').text('Completed, ' + results.data.length + ' records updated');
          pBarMax = 0;
          pBarPerc = 0;
          $('#tbl-pcodes').DataTable().ajax.reload();
          setTimeout(function() {$('#pBarModal').modal('hide');}, 2000);
          setTimeout(function() {$('#pBarModalLabel').text('Processing... please wait');}, 2500);
        }
      } );
    } );

Answer 1

Ok I think I understand your problem now. Here is a JSFiddle I created to recreate the problem, and to show how the solution works: https://jsfiddle.net/rn3y1qgd/7/

The reason it seems like your parsing function is taking "priority" over the modals hiding and showing is because the modal functions are asynchronous. Basically this means when you call them, it won't start updating the html (to hide/show the modals) until after all the code has finished running. This means it has to wait for your parsing function to finish before it shows/hides the modals.

The solution is to wait for the modal to be shown before calling the parsing function. In the fiddle this is the relevant part:

$("#testbtnSolution").click(function() {
    $("#exampleModal").modal('hide');   
    $("#exampleModal2").one('shown.bs.modal', function() {
      longExecutingFunction(2000);
      alert("processing done");
    }).modal('show');  
});

In this code we register an event handler that runs on shown.bs.modal . Once the modal has finished showing, it will then run your processing function.