Promise 中 setTimeout 的使用

谁践踏了优雅 2023-07-10 08:06 12阅读 0赞

### Promise 中 setTimeout 的使用 ###

*  先看一段代码
 *  常见的使用场景
 *   *  实现一个 sleep 函数

# 先看一段代码 #

你能说出下面两段代码的结果差异和原因吗？

function getData() {
        
    	return new Promise((resolve, reject) => {
        
    	  setTimeout(resolve('hello'), 2000)
    	})
    }
    getData().then(res => {
        
      console.log(res)
    })
    // 立马输出 hello

// code2
    
    function getData() {
        
    	return new Promise((resolve, reject) => {
        
    	  setTimeout(resolve, 2000, 'hello')
    	})
    }
    getData().then(res => {
        
      console.log(res)
    })
    // 2s后输出hello

其实呢，这个差异就是 `func()` 和 `func` 的区别，`setTimeout` 的第一个参数是 `func`，如果用 `func()` 相当于其返回值为第一个参数。

这个地方应该是一个函数 `func` ，如果你传的是 `func()` ，代码解析器执行到此处的时候，就会立即执行这个函数，起不到延时的效果了。

# 常见的使用场景 #

## 实现一个 sleep 函数 ##

// 1s 后执行的代码
    const sleep = (time) => {
        
      return new Promise(resolve => setTimeout(resolve, time))
    }
    
    sleep(1000).then(() => {
        
      // 这里写你的操作
    })

// 代码延时
    const sleep = (time) => {
        
      return new Promise(resolve => setTimeout(resolve, time))
    }
    
    async function sleepAsync() {
        
      console.log('1')
      let res = await sleep(1000)
      console.log('2')
      return res
    }
    
    sleepAsync()

\-------------------(正文完)\---------------------------  
一个前端的学习交流群，想进来面基的，可以点击这个logo ➹![Vue学习交流][Vue]，或者手动search群号：685486827，832485817；

写在最后： 约定优于配置-------软件开发的简约原则  
\-------------------------------- (完)\--------------------------------------

我的：  
个人网站： [https://neveryu.github.io/neveryu/][https_neveryu.github.io_neveryu]  
Github： [https://github.com/Neveryu][https_github.com_Neveryu]  
新浪微博： [https://weibo.com/Neveryu][https_weibo.com_Neveryu]

更多学习资源请关注我的新浪微博…

[Vue]: https://neveryu.github.io/prerender-website/logo1.png
[https_neveryu.github.io_neveryu]: https://neveryu.github.io/neveryu/
[https_github.com_Neveryu]: https://github.com/Neveryu
[https_weibo.com_Neveryu]: https://weibo.com/Neveryu