gpt4 book ai didi

javascript - 使 Canvas 动画异步

转载 作者:行者123 更新时间:2023-12-01 01:58:52 26 4
gpt4 key购买 nike

以下代码是一个更大项目的一部分:

<body>
<canvas id="check" width="35px" height="40px" style="background-color: blue;"></canvas>
</body>
<script>
const check = document.getElementById('check');
const checkCtx = check.getContext('2d');
check.onclick = function() {
drawCheck(checkCtx, 5, 30);
setTimeout(function() {
fadeOut(check);
}, 1000);
setTimeout(function() {
check.style.opacity = "1";
checkCtx.clearRect(0, 0, check.width, check.height);
}, 2000);
check.style.backgroundColor = "blue";
}

function drawCheck(ctx, x, y) {
var x1 = x;
var y1 = y;
var x2 = x1;
var y2 = y1;
var x3 = x1 + 14;
var y3 = y1 + 7;
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.lineCap = "round";
ctx.lineWidth = 5;
ctx.moveTo(x1, y1);

function draw() {
x2++;
y2 += .5;
ctx.lineTo(x2, y2);
ctx.stroke();
if (x2 < x1 + 14) {
requestAnimationFrame(draw);
} else {
function drawNext() {
x3 += .5;
y3 -= 1.5;
ctx.lineTo(x3, y3);
ctx.stroke();
if (x3 < x1 + 24) {
requestAnimationFrame(drawNext);
} else {
return;
}
}
drawNext();
return;
}
}
draw();
}

function fadeOut(obj) {
var opc = 1;
var finish = false;
obj.style.opacity = 1;

function fade() {
opc -= 0.125;
obj.style.opacity = opc + "";
console.log(opc);
if (opc > 0) {
requestAnimationFrame(fade);
}
}
console.log("Wait for it...");
fade();
console.log("Finished!");
}
</script>

如果您查看控制台,您可以看到 fadeOut 函数在 fade 函数结束之前结束。因此,我必须使用多个 setTimeout 函数。我的其他功能也有同样的问题。我不想依赖这些,那么如何让代码等待被调用的函数返回?

最佳答案

回调(ES5)、 promise (ES6)、异步/等待(ES7)

您想要异步运行代码。这意味着等待部分代码完成工作后再运行下一个。默认情况下,Javascript 会尽快执行所有操作,无论如何。

错误:

function run(){ 
console.log('1: start run')
setTimeout(()=>{
console.log('2: timeout')
},1000)
}

function run2(){
console.log('3: start run2')
setTimeout(()=>{
console.log('4: timeout')
},1000) // change time here and check order console.log's
}

function run3(){
console.log('4: start run3')
setTimeout(()=>{
console.log('5: timeout')
},1000)
}
run()
run2()
run3()

3 个函数同时启动,它们给出结果,而无需查看其他 2 个函数中发生的情况。尝试更改超时以更改 conole.log 中的顺序。但在现实生活中,您无法像这里一样控制时间执行。

回调:

通过回调,您可以将一个函数嵌套在另一个函数中,并将其作为参数传递。想法是在第二个函数开始之前等待第一个函数执行...在第三个函数之前等待第二个函数...依此类推。

function runWithCallback(callback){ // run1
console.log('1: start runWithCallback()')
setTimeout(()=>{
console.log('2: timeout')
callback(runAfterCallback)
},1000)
}

function runCallback(callback){ // run2
console.log("3: start runCallback()")
setTimeout(()=>{
console.log('4: timeout')
callback()
},1000)
}

function runAfterCallback(){ // run3
console.log("5: start runAfterCallback()")
setTimeout(()=>{
console.log('6: timeout')
// next call back here if needed
},1000)
}

runWithCallback(runCallback)

现在,无论每个函数的执行时间有多长,下一个函数都会在第一个函数完成后开始。这样您就不需要猜测执行时间来延迟代码。

promise

在 es6 中,你可以使用 Promise 来做到这一点,这有点像回调的语法糖。在撰写本文时,Promise 的浏览器覆盖率达到 90% https://caniuse.com/#feat=promises

function run1(){
console.log('1: run1')
return new Promise(function(resolve){
console.log('2: promise')
setTimeout(resolve,100)
})
}

function callback(){
console.log('3: run2 callback')
return new Promise(function(resolve){
console.log('4: promise')
setTimeout(resolve, 1000)
})
}

function callback2(){
console.log('5: run3 callback')
return new Promise(function(resolve){
console.log('6: promise')
setTimeout(resolve, 100)
})
}

run1()
.then(callback()) // try to change order here, uncoment last lines...
.then(callback2())
// .then(callback2())
// .then(callback())

关于javascript - 使 Canvas 动画异步,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50776240/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com