被js的setTimeout搞得头疼

Z时代
2024-01-10
分类：技术分享

在学习javascript的Promise对象，教程的其中一个源码是用123顺序执行几步算法。

被js的setTimeout搞得头疼

<!DOCTYPE html>

<htmllang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>



<body>

    <div id="test-promise-log" style="border: solid 1px #ccc; padding: 1em; margin: 15px 0;">

        <p>Log:</p>

  </div>

</body>

    'use strict';

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

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

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

    varp=newPromise(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);
        });

打算自己写js代码和原来用promise的代码比照来理解Promise的原理，但是原来程序的效果中步骤是每隔0.5打印的，结果我就卡在了实现隔秒的打印的settimeout函数上，我几次尝试的结果发现所有步骤都是同时被输出在页面上的：

不管是试图给每个函数后面设置延时：

'use strict'

  varlogging=document.getElementById('test-promise-log');

  while (logging.children.length>1) {

•    logging.removeChild(logging.children[logging.children.length-1]);

  }



  functionlog(s) {

•    varp=document.createElement('p');

•    p.innerHTML=s;

•    logging.appendChild(p);

  }

  // 0.5秒后返回input*input的计算结果:

  functionmultiply(input) {

•    log('calculating '+input+' x '+input+'...')

•    returninput*input;

  }



  // 0.5秒后返回input+input的计算结果:

  functionadd(input) {

•    log('calculating '+input+' + '+input+'...')

•    returninput+input;

  }



  log("Start Calculating...");

  varresolve=123;



  resolve=multiply(resolve);

  setTimeout(function(){

•    console.log('等待0.5秒');//结果是这4个console.log()0.5秒后同时在页面输出

  },5000);

  resolve=add(resolve);

  setTimeout(function(){

•    console.log('等待0.5秒');

  },500);

  resolve=multiply(resolve);

  setTimeout(function(){

•    console.log('等待0.5秒');

  },500);

  varresult=add(resolve);

  setTimeout(function(){

•    console.log('等待0.5秒');

  },500);  

  log('Got value: '+result);

    functionsleep(setTime)
    {
        varcurTime=Date.now();
        while( Date.now() -curTime<setTime)
        {

        }
    }

...

log("Start Calculating...");//步骤仍旧是同时被打印，而且网页加载花了很长时间
    varresolve=123;

    resolve=multiply(resolve);
    sleep(500);  
    resolve=add(resolve);
    sleep(500);  
    resolve=multiply(resolve);
    sleep(500);  
    varresult=add(resolve);
    sleep(500);  
    log('Got value: '+result);

还是试图在每个函数打印步骤的语句后面加上延时：

functionmultiply(input) {

     setTimeout(function(){
    •   log('calculating '+input+' x '+input+'...');//步骤仍旧同时打印
      },500);
        
        returninput*input;
    }