Задержка ajax звонка до отправки формы после?

Question

Я нашел много ответов о задержке отправки функции до тех пор, пока не завершится ajax вызов, но не наоборот. Как я могу убедиться, что мой ajax звонок не будет выполнен до тех пор, пока моя форма не будет отправлена?

У меня есть этот код для загрузки изображений при отправке формы, который работает, но с небольшим затруднением. Отображается только изображение при следующем вызове. ТАК ЧТО первая отправка формы не загружает изображение, вторая отправка формы загружает одно изображение, третья отправка формы загружает два изображения и т. Д.

изображение от json до отправки информации об изображении на json?)

Это мой js код:

document.getElementById('form').onsubmit = function(event){
  event.preventDefault() // prevent form from posting without JS
  var xhttp = new XMLHttpRequest(); // create new AJAX request

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) { // sucess from server
      console.log('sent'+this.responseText+ xhttp.status);

    }else{ // errors occured
      console.log(xhttp.status);
    }
  }

  xhttp.open("POST", "upload")
  var formData = new FormData()
  formData.append('name', document.getElementById('name').value) 
  formData.append('avatar', document.getElementById('avatar').files[0]) 
  xhttp.send(formData)
}

$('form').on("submit", function(event){ 
  event.preventDefault()
  $.ajax({
    type: "GET",
    datatype: "JSON",
    error: function(){
      $("#status").html("<p> An error occured </p>");
    },
    success:
      function(data){
        var $image = $('#new-image')
        $.getJSON("images.json", function(data){
              $image.html("");
            for (var i = 0; i < data.length; i++)
            {
              console.log(data[i]["name"])
              $image.append('<img src="' + data[i]["name"] + '">');
            }
      })
    }
  })
})

Моя сторона сервера:

const express = require("express");
const session = require("express-session");
const bodyParser = require('body-parser');
const multer = require('multer');
const path = require('path');
const fs = require("fs");
const sharp = require('sharp');
const {v4: uuidv4} = require('uuid');
const cors = require("cors");

// Set The Storage Engine
var storage =   multer.diskStorage({
    destination: function (req, file, callback) {
      callback(null, './client/images');
    },
    filename: function (req, file, callback) {
      callback(null, file.fieldname + '-' + Date.now());
    }
  });


//create server
const app = express();
app.use(express.static(__dirname + '/client'));
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(bodyParser.json());
//app.use(express.static("./client/images.json"))
//app.get('/favicon.ico', (req, res) => res.status(204));

var images = require("./client/images.json");

app.get("/", function (request, response){
    response.send(images);
});

/*app.post("/new", function (request, response){
  const newImage = {
    id: uuidv4(),
    name: req.file.originalname};
  images.push(newImage);
  const json = JSON.stringify(images);
  fs.writeFile('images.json', json, 'utf8', console.log);

});
*/

// Multer single file parser
const upload = multer({limits:{fileSize:4000000}}).single('avatar')
app.post('/upload', (req, res)=>{
    upload(req, res, async function(err){ 
     // check for error thrown by multer- file size etc
     if( err|| req.file === undefined){
         console.log(err)
         res.send("error occured")
     }else{
        var image = await sharp(req.file.buffer)
            .resize({ width: 200, height:200 }) 
            .toFile('./client/'+req.file.originalname)
            .catch( err => { console.log('error: ', err) })
        res.send(req.body)
        const newImage = {
          id: uuidv4(),
          name: req.file.originalname
        };
        images.push(newImage);
        const json = JSON.stringify(images);
        fs.writeFile('./client/images.json', json, 'utf8', console.log);
        /*var ImageName = {
            id: uuidv4(),
            name: req.file.originalname
        }

        var data = JSON.stringify(ImageName, null, 2);
        fs.appendFile('./client/images.json', data+'\r\n', (err) => {
            if (err) throw err;
            console.log("filename saved to json file");
        })*/
     }
    })
})



//tell server which port
app.listen(8090, () => {
    console.log('Listening on localhost')
  });