这是在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还是陌生的。 而且这种纠结的东西对我来说很可笑。 这是使代码按顺序运行的正确方法吗？