前端延时随机函数模拟抽奖
- 点击按钮，模拟抽奖
- 延时1s返回结果
效果：
普通的使用回调方式的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖</title>
</head>
<body>
<button id="btn">点我抽奖</button>
<script>
// 生成随机数
function rand(m, n){
return Math.ceil(Math.random() * (n-m+1)) + m-1
}
const btn = document.querySelector('#btn')
btn.addEventListener('click', ()=>{
setTimeout(()=>{
const n = rand(0, 100)
if(n<=30){
alert('恭喜中奖，奖品为劳斯莱斯优惠券满10万减10元')
}else{
alert('再接再厉')
}
}, 1000)
})
</script>
</body>
</html>
使用Promise风格实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖</title>
</head>
<body>
<button id="btn">点我抽奖</button>
<script>
// 生成随机数
function rand(m, n){
return Math.ceil(Math.random() * (n-m+1)) + m-1
}
const btn = document.querySelector('#btn')
btn.addEventListener('click', ()=>{
//Promise对象接受一个回调函数
//resolve 解决，函数类型
//reject 拒绝，函数类型
const p = new Promise((resolve, reject)=>{
setTimeout(()=>{
const n = rand(0, 100)
if(n<=30){
// 可以传参数value
resolve(n)// 将Promise对象的状态设置为 成功
}else{
// 可以传参数reason
reject(n) // 将Promise对象的状态设置为 失败
}
}, 1000)
})
// 调用then()方法
p.then(
// 成功的调用
(value)=>{
alert('恭喜中奖，奖品为劳斯莱斯优惠券满10万减10元,你的号码为'+value)
},
// 失败的调用
(reason)=>{
alert('再接再厉,你的号码为'+reason)
}
)
})
</script>
</body>
</html>