如何运行一个调用某个函数的函数首先完成它，然后再调用下一个函数.正在创建回调函数

How to run a function that calls a function finished it first before calling next function. Creating a callback function

本文关键字：函数 调用 回调 然后 下一个 创建 运行 何运行 一个      更新时间：2023-09-26

当用户单击任何图像时，所有图像（images_holder）都会慢慢淡出。然后，在它消失后，另一个图像淡入，然后在3秒钟后，图像淡出。在那之后，图像支架又消失了。我的问题是，在衰减器完成之前，secondStep功能已经在运行。

我想要的是完成第一步，完成音量控制器功能，然后运行第二步。一直在尝试创建此回调，但没有成功。

这是我的html

<div id="container">
    <!--<img src="images/background.jpg"/>-->
    <div id="faces_holder">
        <img id="face1" onclick="loadUnload(1)" src="images/face_03.png" width=350; height=656;/><img id="face2" onclick="loadUnload(2)" src="images/face_04.png" width=350; height=656;/><img id="face3" onclick="loadUnload(3)" src="images/face_05.png" width=350; height=656;/><img id="face4" onclick="loadUnload(4)" src="images/face_06.png" width=350; height=656;/><img id="face5" onclick="loadUnload(5)" src="images/face_07.png" width=350; height=656;/>
    </div>
    <div id="pop_face"><img id="popface_img" src=""/></div>
</div>

这是我的JavaScript:

    var id = "";
    var kindface=0;
    var fadeIn;
    var counterValue;
    var objHolder;

    function loadUnload(kindface){
        //FADEIN FADEOUT    
        function fader() {
            if(fadeIn == true){
                counterValue++;
                //setPoint = 9;
            }else{
                counterValue--;  // update parameters
                //console.log("hit");
            }
            objHolder.style.opacity = "0."+counterValue // show frame
            if (counterValue == setPoint){  // check finish condition
                clearInterval(id);
                console.log("end fader");
            }
        }
        //FADEOUT

更新

我刚刚添加了第三步，我将如何实现这一点？我想在第二步之后运行第三步。step完成音量控制器功能？

function thirdstep() {
        console.log("begin second step: ")
            fadeIn = true;
            counterValue = 0;
            setPoint = 9;
            objHolder = document.getElementById("popface_img");
            objHolder.src = "images/"+ kindface +".png";
            id = setInterval(fader, 100); // draw every 100ms
            console.log("end second step: ")
        }
        function secondStep() {
            console.log("begin second step: ")
            fadeIn = true;
            counterValue = 0;
            setPoint = 9;
            objHolder = document.getElementById("popface_img");
            objHolder.src = "images/"+ kindface +".png";
            id = setInterval(fader, 100); // draw every 100ms
            console.log("end second step: ")
        }
        function firstStep(callback) {
            console.log("begin first step: ")
            fadeIn = false;
            objHolder = document.getElementById("faces_holder");
            counterValue = 10;
            setPoint = 0;

            id = setInterval(callback, 100); // draw every 100ms
            console.log("end first step: ")
            secondStep();
        }

        //RUN FIRST STEP FUNCTION 
        console.log("BEGIN process ")             
            firstStep(fader);
        console.log("END OF ALL process ")
    }
</script>

在您的代码中：

> id = setInterval(callback, 100); // draw every 100ms
> console.log("end first step: ")
> secondStep();

secondStep被立即调用，它不等待setInterval建立的序列完成。您需要从衰减器调用secondStep，例如

function loadUnload(kindface){
    [...]
    function fader() {
        if (counterValue == setPoint){  // check finish condition
            clearInterval(id);
            console.log("end fader");
            // now call secondStep
            secondStep();
        }
    }
    [...]
}
相关文章：