Это правильный способ сделать обратный вызов в JS?

Question

function first(i, callback){
    var img_full_url = S3.getSignedUrl('getObject', {
      Bucket: BUCKET,
      Key: result.data[i].picture_url
    });
    callback(i, img_full_url);
  }

  function second(i, img_full_url, callback){
    $('#img_holder').after(`<img id="img${i}" src= "${img_full_url}" crossorigin>`);
    callback(i);
  }

  function third(i, callback){
    var img = document.querySelector(`#img${i}`);
    img.addEventListener('load', function(event) {
      var dataUrl = getDataUrl(event.currentTarget);
      callback(i, dataUrl);
    });
  }

  function forth(i, dataUrl){
    zip.file(`${result.data[i].picture_url}.txt`, dataUrl);
  }

  for(var i = 0; i<3; i++){
    first(i, function(i, img_full_url){
      second(i, img_full_url, function(i){
        third(i, function(i, dataUrl){
          forth(i, dataUrl);
        });
      });
    });
  }

Код выше дал мне вывод, который я хочу.Однако я новичок в вещах обратного вызова и JS.И эта запутанная вещь выглядит смешной для меня.Это правильный способ сделать так, чтобы код работал по порядку?