如何将异步函数结果作为 js/jquery 中的参数传递给 ajax 函数？

Question

我正在尝试保存视频快照的 base64 图像代码...

为此，我找到了第一个函数，它构建了我想要的快照，这个函数 videoSnap 是异步的，我想通过一个 ajax 函数发送它以进行进一步的操作。

问题是我的 videoSnap 的结果是在 ajax 调用之后完成的，因此，每当我尝试将结果作为 ajax 函数的参数发送时，结果保持未定义...

我怎样才能做到这一点？我考虑过使用 then() 的 promise 函数，但结果仍然相同......我在 ajax 调用后不断获取 base64 代码，使其无效......

我开始缺乏解决方案和想法...... ^^'

非常感谢您的大力帮助！ :)

    getTime = function (){
        var t = new Date();
        return t.getTime();
    }

    dump = function (r) {
        var pre = document.createElement('pre');
        pre.innerHTML = r;
        document.body.appendChild(pre)
    }

    videoSnap = function (file){
        var reader = new FileReader();
        if (file.type.match('video')) {
            reader.onload = function() {
              var blob = new Blob([reader.result], {type: file.type});
              var url = URL.createObjectURL(blob);
              var video = document.createElement('video');
              var timeupdate = function() {
                var snap = snapImage();
                if (snap.success) {
                  video.removeEventListener('timeupdate', timeupdate);
                  video.pause();
                  dump(getTime()+' : '+snap.image);
                  return snap.image;
                }else{
                  return false;
                }
              };
              video.addEventListener('loadeddata', function() {
                var snap = snapImage();
                if (snap.success) {
                  video.removeEventListener('timeupdate', timeupdate);
                  dump(getTime()+' : '+snap.image);
                  return snap.image;
                }else{
                  return false;
                }
              });
              var snapImage = function() {
                var canvas = document.createElement('canvas');
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                var image = canvas.toDataURL();
                var success = image.length > 100000;
                var result = { success: success, image: image };
                return result;
              };
              video.addEventListener('timeupdate', timeupdate);
              video.preload = 'metadata';
              video.src = url;
              // Load video in Safari / IE11
              video.muted = true;
              video.playsInline = true;
              video.play();
            };
            reader.readAsArrayBuffer(file);
        }else{
            return false;
        }
    }

    dump(getTime());

    var base64Img = videoSnap(videoFile);

    formData.append("videoSnap",base64Img);

    /*
    function videoSnapPromise(vid) {
        return new Promise((resolve) => {
        resolve(videoSnap(vid));
      })
    }   
    function appendResolve(resolve) {
        formData.append("videoSnap",resolve);
    }

    const promise = videoSnap(videoFile);
    promise.then(appendResolve);
    */

    dump(getTime());

    $.ajax({
        type: 'POST',
        url: 'uploadBase64Img.php',
        timeout: 10000,
        data: formData,
        processData: false, 
        contentType: false, 
        dataType: "json",
        complete: function() {
            // complete function
        }
    });

    dump(getTime());

Answer 1

执行此操作的一种方法是创建一个回调函数并将其作为参数发送到第一个函数，然后重构您的第一个函数以调用该回调并将操作结果传递给它而不是返回它。

这样的事情应该可以工作：

getTime = function() {
  var t = new Date();
  return t.getTime();
}

dump = function(r) {
  var pre = document.createElement('pre');
  pre.innerHTML = r;
  document.body.appendChild(pre)
}


var videoSnap = function(file, callback) {
  var reader = new FileReader();
  if (file.type.match('video')) {
    reader.onload = function() {
      var blob = new Blob([reader.result], {
        type: file.type
      });
      var url = URL.createObjectURL(blob);
      var video = document.createElement('video');
      var timeupdate = function() {
        var snap = snapImage();
        if (snap.success) {
          video.removeEventListener('timeupdate', timeupdate);
          video.pause();
          dump(getTime() + ' : ' + snap.image);
          callback(snap.image);
        } else {
          callback(false);
        }
      };
      video.addEventListener('loadeddata', function() {
        var snap = snapImage();
        if (snap.success) {
          video.removeEventListener('timeupdate', timeupdate);
          dump(getTime() + ' : ' + snap.image);
          callback(snap.image);
        } else {
          callback(false);
        }
      });
      var snapImage = function() {
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        var image = canvas.toDataURL();
        var success = image.length > 100000;
        var result = {
          success: success,
          image: image
        };
        callback(result);
      };
      video.addEventListener('timeupdate', timeupdate);
      video.preload = 'metadata';
      video.src = url;
      // Load video in Safari / IE11
      video.muted = true;
      video.playsInline = true;
      video.play();
    };
    reader.readAsArrayBuffer(file);
  } else {
    callback(false);
  }
}



var doAjax = function(base64Img) {
  var formData = FormData();
  formData.append("videoSnap", base64Img);
  $.ajax({
    type: 'POST',
    url: 'uploadBase64Img.php',
    timeout: 10000,
    data: formData,
    processData: false,
    contentType: false,
    dataType: "json",
    complete: function() {
      // complete function
    }
  });

}


videoSnap(videoFile, doAjax);