Question

我希望在运行一些其他功能并将内容加载到我的网页后启动一系列功能。我使用过setTimeOuts但我理解这种做法很糟糕，因为连接可能会有延迟，在这种情况下它们会运行不正确。如何在不使用setTimeOuts的情况下按顺序执行功能。

avgEmotion和avgSentiment函数应该在网页上通过newsApiLeft()和newsApiRight()函数创建一系列列表后运行。

提前非常感谢。

button.addEventListener("click", function () {
  var filter = document.getElementById("news_cat");
  var filterSource = document.getElementById("news_source");
  var category = filter.value;
  var source = filterSource.value;
  params.sources = source;
  params.q = category;
  parameters.q = category;

  var filterL = document.getElementById("news_sourceL");
  var sourceL = filterL.value;
  parameters.sources = sourceL;

  showContent();
  clearTextRight();
  clearTextLeft();

  newsApiLeft();
  newsApiRight();

  setTimeout(avgEmotionR, 2000);
  setTimeout(avgEmotionL, 2000);
  setTimeout(avgSentiment, 2000);
})

Answer 1

在另一个函数返回（异步调用）之后执行函数的正确方法是使用Promises。让您的newsApiLeft()和newsApiRight函数返回Promise，然后按如下方式调用它们：

var newsApiLeft = new Promise(function(resolve, reject) {
  // do something long running
  let everythingWasOK = true;

  if (everythingWasOK) {
    resolve("I can return a value");
    //or just resolve();
  } else {
    reject(Error("Or error"));
  }
});

newsApiLeft.then((returnedData)=>{
  avgEmotionL();
  //run another function here;
  //you can use the returnedData
}, (error)=>{
    //optionally handle error
})

Answer 2

您可以使用JavaScript承诺实现此目的。

这里我创建了一个Promise A，我在下面提到的评论中进行逻辑处理。然后，您需要根据您的逻辑解决或拒绝它。如果你解决了then（）函数将被调用。

在first then（）函数中，您可以嵌套新的promise。同样聪明的你可以尽可能多地筑巢。通过这种方式，您可以确保承诺B仅在承诺A结束后执行。

var A = new Promise(function(resolve, reject) {

    // Do an async task here and then...

    if(/* good condition */) {
        resolve('Success!');
    }
    else {
        reject('Failure!');
    }
});

A.then(function() { 
    /* do something with the result */
}).catch(function() {
    /* error :( */
})

执行承诺A只需执行A();

Answer 3

您可以使用回调来实现此目的：

function newsApiLeft(callback) {
    // Load stuff

    // Then call the callback; the code you want
    //  to run after the loading is complete
    callback();
}

newsApiLeft(function() {
    avgEmotion();
    avgSentiment();
});

如果您对Left和Right使用相同的回调，则可以保存回调并将其用于两者：

var callback = function() {
    avgEmotion();
    avgSentiment();
}

newsApiLeft(callback);
newsApiRight(callback);

如何在完成另一个函数后使Javascript函数触发？

3 个答案: