Promise中的setTimeOut参数问题

📃正文

Promise中的setTimeOut参数问题

在看 廖雪峰的 javascript 教程的 Promise 一节看到一个疑问点。

关于Promise的异步执行，其中一个示例代码中看到了setTimeOut的第三个参数。

代码如下:

'use strict';

var logging = document.getElementById('test-promise2-log');
while (logging.children.length > 1) {
  logging.removeChild(logging.children[logging.children.length - 1]);
}

function log(s) {
  var p = document.createElement('p');
  p.innerHTML = s;
  logging.appendChild(p);
}
// 0.5秒后返回input*input的计算结果:
function multiply(input) {
  return new Promise(function (resolve, reject) {
    log('calculating ' + input + ' x ' + input + '...');
    setTimeout(resolve, 500, input * input);
  });
}

// 0.5秒后返回input+input的计算结果:
function add(input) {
  return new Promise(function (resolve, reject) {
    log('calculating ' + input + ' + ' + input + '...');
    setTimeout(resolve, 500, input + input);
  });
}

var p = new Promise(function (resolve, reject) {
  log('start new Promise...');
  resolve(123);
});

p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function (result) {
  log('Got value: ' + result);
});

在讲 input*input 和 input+input 作为第三个参数传入为第一个参数函数的参数时，输出结果可以做到延时。

但如果我将代码修改为直接作为第一个 resove 的参数传入，就无法做到延时的效果。

代码如下：

'use strict';

var logging = document.getElementById('test-promise2-log');
while (logging.children.length > 1) {
  logging.removeChild(logging.children[logging.children.length - 1]);
}

function log(s) {
  var p = document.createElement('p');
  p.innerHTML = s;
  logging.appendChild(p);
}
// 0.5秒后返回input*input的计算结果:
function multiply(input) {
  return new Promise(function (resolve, reject) {
    log('calculating ' + input + ' x ' + input + '...');
    setTimeout(resolve(input*input), 500);
  });
}

// 0.5秒后返回input+input的计算结果:
function add(input) {
  return new Promise(function (resolve, reject) {
    log('calculating ' + input + ' + ' + input + '...');
    setTimeout(resolve(input+input), 500);
  });
}

var p = new Promise(function (resolve, reject) {
  log('start new Promise...');
  resolve(123);
});

p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function (result) {
  log('Got value: ' + result);
});

应该是因为异步一类的原因，待整理。

原因

一年后我来更新了，现在回看真是个白痴问题。

先提 setTimeout 函数。

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]); 
var timeoutID = scope.setTimeout(code[, delay]);

这是该函数的调用实例。

• 第一个参数可以是字符串代码也可以是函数。

• 第二个参数是该函数的调用时延，是可选参数，省略的话默认为 0 。

• 第三个及后面的参数为参数列表，代表第一个参数调用时传入的参数。

那么在前面的例子中，第三个参数 input * input or input + input 都是传入第一个参数 resolve 回调的参数。

而我当时想到的是第一个参数直接写为 resolve(input * input) ，这样其实是错误的，因为这样的书写方法代表了直接调用 resolve 回调。那么 setTimeou 的延迟作用就无效了。