How to call many functions in a specific order in react js button?-CodePudding

For many reasons I can't define my functions before and call them in my button. I have to define them directly in the button. This button allow to zoom in a part of an image, then the image should disappear. So I want to call many functions in a specific order. In a first time there were only 2 functions and that worked as following

<button id="zoomInButton" disabled={props.has_zoomed != 1} onClick={
     async (x, y, scale, step, animationTime) => {
         return new Promise((resolve, reject) => {

            // zoom in
            setTransform(x=-3740, y=-1860, scale=4.25, animationTime=3000)
         }).then(setTimeout(function() {

            // image disapeear with reducing opacity
            $("#village").fadeTo(3000, 0);
         }, 3000))
     }
}>        </button>

But now I want to add a 3rd function, the one which make the #village totally disappear, by passing hidden to True , I did like that but it doesn't work :

<button id="zoomInButton" disabled={props.has_zoomed != 1} onClick={
     async (x, y, scale, step, animationTime) => {
         return new Promise((resolve, reject) => {

        // zoom in
        setTransform(x=-3740, y=-1860, scale=4.25, animationTime=3000)
     }).then(setTimeout(function() {

        // image disapeear with reducing opacity
        $("#village").fadeTo(3000, 0);
     }, 3000)).then(setTimeout(function() {

         // for starting I just made an alert
         alert("YES");
     }, 3000))
 }
}>           </button>

And that's not the expected result, "YES" is displayed automaticall then I can see the ZoomIn & FadeTo

Thank you for reading and helping

CodePudding user response：

The last then chain on setTimeout which is no use. You can add the second setTimeout inside the first one as shown below as example. Run the snippet to check the output which shows that the last alert is shown 3 seconds after 2nd one which is shown 3 seconds after the firstone.

const clickMethod = async () => {
     return new Promise((resolve, reject) => {
    // zoom in
    alert("setTransform");
   // setTransform(x=-3740, y=-1860, scale=4.25, animationTime=3000)
 }).then(setTimeout(function() {

    // image disapeear with reducing opacity
    alert("fadein");
    // $("#village").fadeTo(3000, 0);
    setTimeout(function() {

     // for starting I just made an alert
     alert("YES");
 }, 3000)
 }, 3000));

}

clickMethod();