Question

我正在创建一个依赖于通过ajax加载vimeo和youtube播放列表api的视频播放器。加载完成后，对于youtube，我需要遍历播放列表中的所有视频，并为每个视频调用数据api以获取其修改日期。加载所有vimeo视频并加载所有YouTube视频并创建其创建日期后，我需要使用jquery对它们进行排序。

我正在寻找检测这些进程何时完成的最佳方法，问题是在vimeo函数和youtube函数都完成之前我无法真正开始排序。我能想到的最好的事情是运行一个setInterval函数来检查两个布尔标志的状态 - 例如：

var youtubeReady = false, vimeoReady = false;
var videoStatusInterval = setInterval("checkVideoStatus",1000);

function checkVideoStatus(){
  if (youtubeReady === true && vimeoReady === true){
    sortVideos();
  }
}

问题是这只会定期运行（在示例中每秒一次） - 似乎应该有一种方法可以在满足两个条件时立即执行此操作。有人有什么想法吗？

Answer 1

我不熟悉Youtube的API和Vimeo，但也许他们有一个'ready'，'done'或'loaded'事件你可以听两个，然后，在你设置的处理程序中，你设置了两个标志，那么，如果两者都是真的，那么你执行，就像这样：

    //Let's createa a couple of custome events to simulate the real ones, comming from Youtube and Vimeo.
var youtube = document.createEvent('Event'),
    vimeo  = document.createEvent('Event');

youtube.initEvent('youtubeReady');
vimeo.initEvent('vimeoReady');

/*
* This function will be use to run YOUR code, ONCE BOTH events are triggered.
* As said, functions are objects so, as any object in JS, you can add fields at any time you want.
* Check this page in Mozilla's Developer Network for more detail:  http://goo.gl/Pdvpk */
function sourcesReady(){
  if(sourcesReady.youtube && sourcesReady.vimeo){
        alert('Both sources ready!');
  }
  else if(sourcesReady.youtube){ 
    alert('Only Youtube ready!');
  }
  else if(sourcesReady.vimeo){ 
    alert('Only Vimeo ready!');
  }
}

//Let's set a couple of event handlers for the 'ready' events, these handlers will set the flags that we need.
document.addEventListener('youtubeReady', function youtubeReadyHandler(){
  sourcesReady.youtube = true; //We set/create the field in the function, that is, the function ITSELF has the field, not the 'this'.
  sourcesReady(); //We call it to evaluate the condition.
}, true);

document.addEventListener('vimeoReady', function vimeoReadyHandler(){
  sourcesReady.vimeo = true; //same as before.
  sourcesReady(); //We call it to evaluate the condition.
}, true);

document.dispatchEvent(youtube);
document.dispatchEvent(vimeo);

希望这个建议有所帮助。 =）

Answer 2

即使这些操作是异步完成的，您仍然可以创建全局变量。

var youTubeScanDone = false, vimeoScanDone = false;

然后在完成后将这些变量设置为true。创建一个函数function sortVideoList() { ... }，并在每次扫描结束时调用这样的行

if (youTubeScanDone && viemoScanDone) sortVideoList();

确保在调用此行之前将布尔值设置为true（取决于您所在的扫描函数。

基于变量状态执行脚本

2 个答案: