迭代不遵守顺序 - 不确定我的脚本有什么问题 - Javascript

Question

I have a form at work where it can be done only 1 by 1 and I'm trying to automate it using Javascript (can't use excel because security doesn't allow linking any external JS scripts for working with excel) so I decided to save data in .txt file and browse for it and save as an array and then iterate within the array, but the problem I'm facing is that I'm the iterator is filling the fields with the last elements of the array. I thought the issue might be because of timing so I tried to use setTimeout but didn't help as well.

Example:

var alphabet = ['a','b','c','d','e','f'];
var alphabetPairs = splitArrayIntoChunksOfLen(alphabet,3); //split into chunks of 3
console.log(alphabetPairs);

for(let i=0; i<alphabetPairs.length; i++)
 for(let j=0; j<alphabetPairs[i].length; j++)
    console.log(alphabetPairs[i][j])

Now with the above for loops if I use it to fill the elements of the form, they filled with a,b,c and then replaced by d,e,f which I don't want, I want the loop to finish first working with a,b,c then click a submit button and then move to d,e,f

the HTML code of the form is:

<form class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-form" method="POST" id="ext-gen34"
    style="overflow: auto; width: auto; height: auto;">
    <div id="ext-comp-1007" class=" aws-tool-errorbox"></div>
    <div class="x-form-item " tabindex="-1" id="ext-gen94"><label for="c_and_r_account_id" style="width:120px;"
            class="x-form-item-label" id="ext-gen95">Account ID:</label>
        <div class="x-form-element" id="x-form-el-c_and_r_account_id" style="padding-left:125px"><input type="text"
                size="20" autocomplete="off" id="c_and_r_account_id" name="c_and_r_account_id"
                class=" x-form-text x-form-field x-form-empty-field" style="width: 242px;"></div>
        <div class="x-form-clear-left"></div>
    </div>
    <div class="x-form-item " tabindex="-1" id="ext-gen96"><label for="credit_and_rebill_bill_id" style="width:120px;"
            class="x-form-item-label" id="ext-gen97">Invoice ID:<img
                src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                class="aws-ux-helpicon" id="ext-gen99"></label>
        <div class="x-form-element" id="x-form-el-credit_and_rebill_bill_id" style="padding-left:125px"><input
                type="text" size="20" autocomplete="off" id="credit_and_rebill_bill_id" name="credit_and_rebill_bill_id"
                class=" x-form-text x-form-field x-form-empty-field x-form-invalid" style="width: 242px;">
            <div class="x-form-invalid-icon" id="ext-gen98" style="left: 377px; top: 0px; visibility: visible;"></div>
        </div>
        <div class="x-form-clear-left"></div>
    </div>
    <div class="x-form-item " tabindex="-1" id="ext-gen100"><label for="credit_and_rebill_reference_id"
            style="width:120px;" class="x-form-item-label" id="ext-gen101">Reference ID:<img
                src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                class="aws-ux-helpicon" id="ext-gen102"></label>
        <div class="x-form-element" id="x-form-el-credit_and_rebill_reference_id" style="padding-left:125px"><input
                type="text" size="20" autocomplete="off" id="credit_and_rebill_reference_id"
                name="credit_and_rebill_reference_id" class=" x-form-text x-form-field x-form-empty-field"
                style="width: 242px;"></div>
        <div class="x-form-clear-left"></div>
    </div>
    <div class="x-form-item " tabindex="-1" id="ext-gen103"><label for="credit_rebill_reason_code" style="width:120px;"
            class="x-form-item-label" id="ext-gen104">Reason Code for Credit and Rebill:<img
                src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                class="aws-ux-helpicon" id="ext-gen107"></label>
        <div class="x-form-element" id="x-form-el-credit_rebill_reason_code" style="padding-left:125px">
            <div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen105" style="width: 250px;"><input
                    type="text" size="24" autocomplete="off" id="credit_rebill_reason_code"
                    name="credit_rebill_reason_code"
                    class=" x-form-text x-form-field x-form-empty-field x-trigger-noedit" style="width: 225px;"
                    readonly=""><img
                    src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""
                    class="x-form-trigger x-form-arrow-trigger" id="ext-gen106"></div>
        </div>
        <div class="x-form-clear-left"></div>
    </div>
</form>

And my script is:

var lines = [];
var x = 0,
  y = 0;
var accID = "",
  invID = "",
  refID = "",
  reasonCOde = "";
var errArray = [];
var errString = "";

// Creating a button to browse for the txt file
var zNode = document.createElement('div');
zNode.innerHTML = '<input type="file" name= "input file" id="input">';
zNode.setAttribute('id', 'myContainer');
document.getElementById("header").appendChild(zNode);

// adding a function to the button to read the text
let myArray = [];
// a function to split each line into an array of its own
function splitArrayIntoChunksOfLen(arr, len) {
  var chunks = [],
    i = 0,
    n = arr.length;
  while (i < n) {
    chunks.push(arr.slice(i, i += len));
  }
  return chunks;
}

var fileRD = document.getElementById('input');
// adding eventlistener
fileRD.addEventListener('change', () => {
  let fr = new FileReader();
  // reading the file
  fr.readAsText(fileRD.files[0]);
  // looping through each line array and filling data into webops
  fr.onload = function() {
    myArray = fr.result.split(/[\t,\r,\n,\,]+/);
    lines = splitArrayIntoChunksOfLen(myArray, 4);
    //text.innerHTML = lines;
    console.log(lines);

// Creating the functions for the steps

    // clicking on Credit and Rebill option
    var open = function() {
      var cr = document.getElementsByClassName("x-tree-node-indent");
      cr[8].click();
    };

    // a function to fill each element of the credit and rebill
    function fill(ele, val) {
      if (document.getElementById(ele) && val != "") {
        document.getElementById(ele).value = val;
      }
    }

    // clicking on tools to click again on credit and rebill
    var tools = function() {
      var tool = document.getElementsByClassName("x-tree-node-anchor");
      tool[0].click();
    };

    // close credit and rebill
    var close = function() {
      var closeBtn = document.getElementsByClassName("x-tab-strip-close");
      closeBtn[0].click();
    };

    // clicking on tools to click again on credit and rebill
    var tools = function() {
      var tool = document.getElementsByClassName("x-tree-node-anchor");
      tool[0].click();
    };

    

    // iteration to fill the data and submit
    for (x = 0; x < lines.length;) {
      for (y = 0; y < lines[x].length;) {
        console.log(lines[x][0]);
        accID = lines[x][0];
        invID = lines[x][1];
        refID = lines[x][2];
        reasonCOde = lines[x][3];
        y++;
      }
      open();
            setTimeout(function() {fill("c_and_r_account_id", accID);},2000);
      //fill("c_and_r_account_id", accID);
            setTimeout(function(){fill("credit_and_rebill_bill_id", invID);},2000);
      //fill("credit_and_rebill_bill_id", invID);
      setTimeout(function(){fill("credit_and_rebill_reference_id", refID);},2000);
      //fill("credit_and_rebill_reference_id", refID);
      setTimeout(function(){fill("credit_rebill_reason_code", reasonCOde);},2000);
      //fill("credit_rebill_reason_code", reasonCOde);
      //setTimeout(function() {ok();}, 1500);
      setTimeout(function() {close();}, 3000);
      setTimeout(function() {tools();}, 3000);
      console.log(x);
      x++;
    }

  }
})

the .txt file that is being read has details like this:

111111111111    111111111   1111111111  11111111111111111111111111111
222222222222    222222222   2222222222  22222222222222222222222222222

Answer 1

A sleep function and async function fixed my issue.

    // ==> Sleep function
const sleep = (milliseconds) => {
    return new Promise(resolve => setTimeout(resolve, milliseconds))
}

    // ==> Async function
const process = async () => {

   //do something
   await sleep(1000);
   // do next something
   await sleep(1000);
}