1

我想调用相同函数但具有不同值的第二个实例，在第一个实例完全完成后，当前它同时调用两个实例。

    function printLetterByLetter(destination, message, speed) {
        var i = 0;
        var interval = setInterval(function () {
            document.getElementById(destination).innerHTML += message.charAt(i);
            i++;
            if (i > message.length) {
                clearInterval(interval);
            }
        }, speed);
    }

    printLetterByLetter("hc-a", "Hello world", 100);

    printLetterByLetter("hc-b", "Hello world again.", 100);

我怎样才能做到这一点？

4

3 回答 3

1

您可以使用promisewhich 等待您的第一个函数执行然后执行下一个，否则您可以使用async/awaitwhich 也是一个不错的选择。

使用Promise 

function printLetterByLetter(destination, message, speed) {
    var i = 0;
    return new Promise(function(resolve, reject) {
        var interval = setInterval(function() {
            document.getElementById(destination).innerHTML += message.charAt(i);
            i++;
            if (i > message.length) {
                clearInterval(interval);
                resolve(true);
            }
        }, speed);
    });
}


printLetterByLetter("hc-a", "Hello world", 100).then(function(resolve) {
    printLetterByLetter("hc-b", "Hello world again.", 100);
}, function(reject) {});

使用async/await

    function printLetterByLetter(destination, message, speed) {
        var i = 0;
        return new Promise(function(resolve, reject) {
            var interval = setInterval(function() {
                document.getElementById(destination).innerHTML += message.charAt(i);
                i++;
                if (i > message.length) {
                    clearInterval(interval);
                    resolve(true);
                }
            }, speed);
        });
    }

    (async function() {
        await printLetterByLetter("hc-a", "Hello world", 100);
        printLetterByLetter("hc-b", "Hello world again.", 100);
    })()

于 2018-07-25T17:35:02.740 回答
0

您可以使用 Promises 或 async/await 来执行此操作。请参阅下面的示例，该示例通过使用 Promises 实现了您的目标：

function printLetterByLetter(destination, message, speed) {
  var i = 0;
  // Return promise instance which you can use to execute code after promise resolves
  return new Promise(function(resolve) {
    var interval = setInterval(function() {
      document.getElementById(destination).innerHTML += message.charAt(i);
      i++;
      if (i > message.length) {
        clearInterval(interval);
        // Resolve promise and execute the code in "then" block
        resolve();
      }
    }, speed);
  });
}

printLetterByLetter('hc-a', 'Hello world', 100).then(function() {
  // This code gets executed when promise resolves
  printLetterByLetter('hc-b', 'Hello world again.', 100);
});
<div id="hc-a"></div>
<div id="hc-b"></div>

于 2018-07-25T17:37:40.750 回答
0

如果实际间隔已经结束，您可以使用带有堆栈的经典方法并测试堆栈。

var printLetterByLetter = function () {
        function startInterval() {
            var data = stack.shift(),
                i = 0;

            return data && setInterval(function () {
                document.getElementById(data.destination).innerHTML += data.message[i++];
                if (i >= data.message.length) {
                    clearInterval(interval);
                    interval = startInterval();
                }
            }, data.speed);
        }

        var stack = [],
            interval;

        return function (destination, message, speed) {
            stack.push({ destination, message, speed });
            interval = interval || startInterval();
        };
    }();

printLetterByLetter("hc-a", "Hello world", 100);
printLetterByLetter("hc-b", "Hello world again.", 50);
printLetterByLetter("hc-c", "See you later, alligator!", 200);
<div id="hc-a"></div>
<div id="hc-b"></div>
<div id="hc-c"></div>

于 2018-07-25T17:54:14.827 回答