Question

由于某些原因，我最难绕过javascript回调，这让我很头疼。我有三个函数，我试图用来解析网站上的一些数据 -

function parseText() {
    //this finds a bunch of DOM elements, grabs the innerHTML from each and stores
    //it in an array
}

function scrollToTop() {
    //this scrolls to the top of the window where I'm getting text from,
    //which causes the window to load more DOM elements to parse
}

function removeOldElements() {
    //this removes the already-parsed DOM elements from the DOM
}

而且我一直这样称呼它......我现在意识到这是一种完全可怕的做法，因为只要我切换标签，Chrome就会完全混乱setTimeout和setInterval时间导致很多错误。

function doEverything() {
    parseText();
    setTimeout(scrollToTop, 2000);
    setTimeout(removeOldElements, 4000);
}

setInterval(doEverything, 5000); 
//this loops it every 5 seconds so I can just run it in a separate tab
//while I continue to work on other things

这有点......但setInterval中的任何暂停或中断都会破坏代码，而我知道我应该使用回调来进行此类调用第一个是完成执行，但我似乎无法让它工作。

我一直在阅读有关回调的内容，并且不太明白这种格式应该是什么..我尝试过这样的事情：

function parseText(callback) {
}

function scrollToTop(callback) {
}

function removeOldElements() {
}

function doEverything() {
    parseText(
        scrollToTop(
            removeOldElements
        )
    )
}

setInterval(doEverything, 5000);

但这似乎只是调用scrollToTop然后parseText两次..并且根本不调用第三个函数！ 哎呀！现在我真的很困惑......

有人可以帮忙吗？我确定我在做一些非常基本的错误。

Answer 1

您正在谈论回调，但我没有看到任何与您的代码明确异步的内容。你需要在这里区分两件事：

同步函数调用：主线程执行整个功能块，永不返回控制，直到它全部执行完毕。你不需要对这类事情进行回调，你只需要在线调用你的函数。

// some code func() // some more code `

异步函数，需要一些时间来执行。为了不阻塞主线程（通常是UI线程本身），代码被推迟到发动机可以节省一些处理周期的一段时间之后。这是您需要回调的地方。它看起来像这样：

// some code async_func(callback_func) // some more code

无法保证async_func中的所有代码都会在some more code之前执行。事实上，它很可能会在以后执行。

从您的功能名称来看，它们看起来没有任何实际的异步工作。所以你可以这样称呼它们：

function doEverything() {
    parseText()
    scrollToTop()
    removeOldElements()
}

此外，您忘记了上次函数调用removeoldElements()的括号，这就是为什么它没有执行。

Answer 2

回调是不错的选择，此示例可能会为您提供更多指导。

function one(fn) {
  console.debug('one...');
  setTimeout(fn, 1000);
}

function two(fn) {
  console.debug('two...');
  setTimeout(fn, 1000);
}

function three(fn) {
  console.debug('three...');
  setTimeout(fn, 1000);
}

function loop() {
  console.debug('loop...');
  setTimeout(function() {
    one(function() {
      two(function() {
        three(loop);
      });
    });
  }, 1000);
}

setTimeout(loop, 1000);

Open browser console, for logs.

Answer 3

我不确定你要做什么，但我建议你这样做：

function parseText(callback) {
        //some code here
        console.log("parsetext");
        scrollToTop('callback');
}

function scrollToTop(callback) {
        //some code here
        console.log("scrollToTop");
        removeOldElements();
}

function removeOldElements() {
        //some code here
        console.log("removeOldElements");
        setTimeout(parseText, 5000);
}

ingparseText();

在Javascript中执行另一个函数

3 个答案: