普通的回调函数
没错,如你所想,点击事件一旦触发以后就结束了,你无法保证这个点击事件的状态保持存在。(不排除可以使用定时器的方案延时获取状态,但这个定时器的指定一定是在回调函数触发之前)
<body>
<button @click="btnClick">按钮</button>
<script>
let Btn = document.querySelector('button')
Btn.onclick = function () {
console.log('我被点击了'); //'我被点击了'
// 做一些操作,这个状态不能保留
}
</script>
</body>
Promise
在promise中,一个回调函数的执行结果的状态可以得到保持,可以在promise状态发生改变后的时间里去拿到这个状态做一些处理(需要做处理的时间不需要在Promise状态改变之前就提前指定):很方便只需要.then就可以。
<body>
<button @click="btnClick">按钮</button>
<script>
let Btn = document.querySelector('button')
let P1 = new Promise(function (resolve, rej) {
Btn.onclick = function () {
//异步任务成功执行后,promise改变状态为resolve,状态改变以后不能再次改变状态,
//并且随时可以获取这个状态
resolve('我被点击了');
// 状态改变并保留
}
})
P1.then(resolve => {
// 做一些操作
console.log(resolve); //'我被点击了'
})
setTimeout(function () {
// 一段时间后做一些操作:由于状态改变为resolve,所以状态改变后的时间里都可以获取这个状态
P1.then(resolve => {
console.log(resolve);//'我被点击了'
})
}, 5000)
</script>
</body>
总结:promise可以在状态改变以后再指定回调函数(使用已经产生的状态):(promise可以在状态改变之后再指定回调函数),而普通回调函数指定回调函数一定是在函数调用之前(必须在函数调用之前指定回调函数)。