如何使用方法链重复调用同一个 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

你正在寻找 Promises，虽然还没有全面支持，你现在可以使用 babel 或 traceur（甚至 jQuery 的 deferred）来使用它们：

var myfunc = {
  copy: function(message) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(message);
      }, 1000);
    });
  }
}

// sequential processing
myfunc.copy('hello').then(function(message1) {
  console.log(message1);
  myfunc.copy('world').then(function(message2) {
    console.log(message2);
  });
});

// batch processing
Promise.all([myfunc.copy('hello'), myfunc.copy('world')]).then(function(values) {
  console.log(values.join(' '));
});

参考：Promise, Promise.all, Promise.then

Answer 2

如果你不想使用 jQuery 你也可以将其作为纯 JS 解决方案。

var myfunc = {
   timer: null,
   stack: [],
   copy: function(val) {
       if(this.timer == null) {
         console.log(val);
         target.innerHTML += val+"<br />";
         this.timer = setTimeout(function(){myfunc.onComplete();},1000);
       }
       else
         this.stack.push(val);
     
       return this;
   },
   onComplete: function() {
      var val = this.stack.shift();
      console.log(val);
      target.innerHTML += val+"<br />";
      if(this.stack.length) {
        this.timer = setTimeout(function(){myfunc.onComplete();}, 1000);
      }
      else this.timer = null;
   }
};

var target = document.getElementById('target');
var trigger = document.getElementById('trigger');

trigger.onclick = function(){
  myfunc.copy("hello").copy("world");
}

<button id="trigger">Start</button>
<div id="target"></div>

Answer 3

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

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; }

如何使用方法链重复调用同一个 JavaScript 函数，同时等待函数运行再次调用它的过程？

How to call the same JavaScript function repeatedly while waiting for the function to run its course before invoking it again, using method chaining?

javascript

method-chaining

如何使用方法链重复调用同一个 JavaScript 函数，同时等待函数 运行 再次调用它的过程？

How to call the same JavaScript function repeatedly while waiting for the function to run its course before invoking it again, using method chaining?

javascript

method-chaining

如何使用方法链重复调用同一个 JavaScript 函数，同时等待函数运行再次调用它的过程？