javascript - 迭代不尊重顺序 - 不确定我的脚本有什么问题 - Javascript

Question

我有一个表格在工作，它只能一个一个地完成，我正在尝试使用 Javascript 自动化它（不能使用 excel，因为安全性不允许链接任何外部 JS 脚本以使用 excel）所以我决定将数据保存在 .txt 文件中并浏览并保存为数组，然后在数组中迭代，但我面临的问题是我是迭代器正在用数组的最后一个元素填充字段。我认为这个问题可能是因为时间问题，所以我尝试使用 setTimeout 但也没有帮助。

例子：

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])

现在使用上面的 for 循环，如果我用它来填充表单的元素，它们会填充 a,b,c 然后用我不想要的 d,e,f 替换，我希望循环首先完成工作使用 a,b,c 然后单击提交按钮，然后移动到 d,e,f

表单的 HTML 代码是：

<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>

我的脚本是：

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++;
    }

  }
})

正在读取的 .txt 文件具有如下详细信息：

111111111111    111111111   1111111111  11111111111111111111111111111
222222222222    222222222   2222222222  22222222222222222222222222222

标签： javascript

Answer 1

睡眠功能和异步功能解决了我的问题。

    // ==> 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);
}