javascript代码从执行中跳过了几行

Question

What i want to achieve is, inserting text values from table cells in to 2 different sql table. They work if i comment the other one. But if i want to use the code above it's completely missing the first loop where y === 0 and second sql receives all values as undefined but i can print them just fine before sql.connect line.

Here is my code

function update() {
  $('body').on('click', '#btnSave', function() {
    values = []
    $('input.form-control').each(function() {
      var valueNew = $(this).val();
      $(this).attr('disabled', true);
      values.push(valueNew);
    })

    for (var y = 0; y < 2; y++) {
      if (y === 0) {
        console.log(y)
        sql.close()
        sql.connect(config, err => {
          const request = new sql.Request()
          let editorTexts = $('#summernote').summernote()[0].value;
          console.log(editorTexts)
          request.query(`INSERT INTO table (col1, col2, col3) VALUES ('${values[1]}', '${values[0]}', '${editorTexts}')`)
          request.on('recordset', columns => {})
          request.on('row', row => {})
          request.on('error', err => {})
          request.on('done', result => {
            console.log(result.rowsAffected)
          })
        })
      } else {
        var table = $("#table tbody");
        for (var x = 0; x < table[0].rows.length; x++) {
          sql.close()
          sql.connect(config, err => {
            const request = new sql.Request()
            request.query(`INSERT INTO table2 (col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11, col12, col13, col14) VALUES ('${values[1]}', '${values[0]}', '${values[3 + (x*10)]}', '${values[4 + (x*10)]}', '${values[5 + (x*10)]}', '${values[6 + (x*10)]}', '${values[7 + (x*10)]}' ,'${values[8 + (x*10)]}','${values[9 + (x*10)]}', '${values[10 + (x*10)]}', '${values[2]}', '${values[11 + (x*10)]}', '${values[12 + (x*10)]}', '${+lastID[0]+1}')`)
            request.on('recordset', columns => {})
            request.on('row', row => {})
            request.on('error', err => {})
            request.on('done', result => {
              console.log(result.rowsAffected)
            })
          })
        }
      }
    }
  })
}

Answer 1

No, the code is still running, but in asynchronous. Asynchronous code takes statements outside of the main program flow, allowing the code after the asynchronous call to be executed immediately without waiting.

Because sql function is async, you closed the connection before the first loop was done. Eg, when y === 1 , the process of insertion when y === 0 still running, and you close it, so the transaction was canceled.It's better for you to learn more about how asynchronous, callback, promise works

I don't know whether your sql client supported pooling or not. However, you should remove the line sql.close() . Closed it once after all transaction are done.

However, what I am concerning is, if y has only 0 and 1 , why do you do it in loop? It is better if you do it step by step like this:

function update() {
  $('body').on('click', '#btnSave', function() {
    values = []
    $('input.form-control').each(function() {
      var valueNew = $(this).val();
      $(this).attr('disabled', true);
      values.push(valueNew);
    })

    // y === 0
    sql.connect(config, err => {
      const request = new sql.Request()
      let editorTexts = $('#summernote').summernote()[0].value;
      console.log(editorTexts)
      request.query(`INSERT INTO table (col1, col2, col3) VALUES ('${values[1]}', '${values[0]}', '${editorTexts}')`)
      request.on('recordset', columns => {})
      request.on('row', row => {})
      request.on('error', err => {})
      request.on('done', result => {

         // y === 1
         var table = $("#table tbody");
          for (var x = 0; x < table[0].rows.length; x++) {
            sql.connect(config, err => {
              const request = new sql.Request()
              request.query(`INSERT INTO table2 (col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11, col12, col13, col14) VALUES ('${values[1]}', '${values[0]}', '${values[3 + (x*10)]}', '${values[4 + (x*10)]}', '${values[5 + (x*10)]}', '${values[6 + (x*10)]}', '${values[7 + (x*10)]}' ,'${values[8 + (x*10)]}','${values[9 + (x*10)]}', '${values[10 + (x*10)]}', '${values[2]}', '${values[11 + (x*10)]}', '${values[12 + (x*10)]}', '${+lastID[0]+1}')`)
              request.on('recordset', columns => {})
              request.on('row', row => {})
              request.on('error', err => {})
              request.on('done', result => {
                console.log(result.rowsAffected)
              })
            })
          }
        })
      })
    }
  })
}

If you know how to work with Promise , it's better to wrap async task with Promise. It's safer and cleaner in code, like this:

    function insertTable(values) {
      return sql.connect(config)
        .then((pool) => {
          const editorTexts = $('#summernote').summernote()[0].value

          return pool.request().query(`INSERT INTO table (col1, col2, col3) VALUES ('${values[1]}', '${values[0]}', '${editorTexts}')`)
        })
    }

    function insertTable1(x, values) {
      return sql.connect(config)
        .then((pool) => {
          return pool.request().query(`INSERT INTO table2 (col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11, col12, col13, col14) VALUES ('${values[1]}', '${values[0]}', '${values[3 + (x*10)]}', '${values[4 + (x*10)]}', '${values[5 + (x*10)]}', '${values[6 + (x*10)]}', '${values[7 + (x*10)]}' ,'${values[8 + (x*10)]}','${values[9 + (x*10)]}', '${values[10 + (x*10)]}', '${values[2]}', '${values[11 + (x*10)]}', '${values[12 + (x*10)]}', '${+lastID[0]+1}')`)
      })
        })
    }

    function update() {
      $('body').on('click', '#btnSave', function() {
        const values = []
        $('input.form-control').each(function() {
          var valueNew = $(this).val();
          $(this).attr('disabled', true);
          values.push(valueNew);
        })

        // y === 0
        insertTable(values)
          .then(() => {
            // y === 1
            const table = $("#table tbody");
            const tasks = []
              for (var x = 0; x < table[0].rows.length; x++) {
                tasks.push(insertTable1(x, values));
              }

              return Promise.all(tasks);
          }).then((results) => {
            console.log("Inserted successfully");
          }).catch((err) => {
            console.error(err);
          });
      })
    }