javascript - 如何使用方法链重复调用相同的 JavaScript 函数，同时等待函数运行完后再再次调用它？

Question

使用方法链，我希望重复触发一个函数，但仅在该函数完成后才触发。几乎就像在函数完全运行之前不要执行一样。预期结果示例:

var myfunc = {
    copy: function(message){
        window.setTimeout(function(){
           console.log(message);
        },1000);
        return this;
    }
};
myfunc.copy('hello').copy('world'); 
// wait a second then log:
// hello
// wait until first function completion (1000ms), wait a second then log:
// world

感谢任何帮助!

Answer 1

具有可变超时的工作模型:

var myfunc = {
    // the queue for commands waiting for execution
    queue: [],

    // (public) combined method for waiting 1000 ms and the displaying the message
    copy: function (message, wait) {
        // have a look for queue length
        var started = myfunc.queue.length;
        // push wait method with value if set or 1000 ms to queue
        myfunc.queue.push(myfunc.wait(wait || 1000));
        // push write message to queue
        myfunc.queue.push(myfunc.write(message));
        // if queue was empty, continuing command call has not started, get next commmand
        started || myfunc.next();
        // return whole object for chaining
        return this;
    },

    // set a timeout for the next next call
    wait: function (m) {
        return function () {
            setTimeout(myfunc.next, m);
        };
    },

    // do some action, here write message and call next
    write: function (message) {
        return function () {
            // present the message
            console.log(message);
            // call next command in queue
            myfunc.next();
        }
    },

    // the fabulous next method. calls the next command and delete it form the queue
    next: function () {
        // test if queue has a command to call, then shift the queue and call the function
        myfunc.queue.length && myfunc.queue.shift()();
    },
};
myfunc.copy('to').copy('be').copy('or', 2000).copy('not').copy('to').copy('be');
myfunc.copy('that', 3000).copy('is').copy('the', 2000).copy('question');

.as-console-wrapper { max-height: 100% !important; top: 0; }

Is there no way to store passed message(s) into an array to fire again after completion. So if it is fired again, it stores the new message in an array. Once initial completion, checks array to see if there are more values, then re-fires function using the next value in said array? I apologize if that sounds confusing.

也许这是适合您的解决方案:

var myfunc = {
    queue: [],
    index: -1,

    copy: function (message, wait) {
        var started = myfunc.queue.length;
        myfunc.queue.push(myfunc.wait(wait || 1000));
        myfunc.queue.push(myfunc.write(message));
        started || myfunc.next();
        return this;
    },

    wait: function (m) {
        return function () {
            setTimeout(myfunc.next, m);
        };
    },

    write: function (message) {
        return function () {
            console.log(message);
            myfunc.next();
        }
    },

    next: function () {
        myfunc.index++;
        myfunc.index %= myfunc.queue.length;
        myfunc.queue[myfunc.index]();
    },
};

function go(i) {
    [
        function () { myfunc.copy('to').copy('be'); },
        function () { myfunc.copy('  or', 2000).copy('  not').copy('  to').copy('  be'); },
        function () { myfunc.copy('    that', 3000).copy('    is').copy('    the', 2000).copy('    question'); }
    ][i]();
}

go(0);
setTimeout(go, 5000, 1);
setTimeout(go, 20000, 2);

.as-console-wrapper { max-height: 100% !important; top: 0; }