Application of requestAnimationFrame () in Javascript

brief description of the problem: this code is long, it is recommended to copy it to the editor. The problem is to use two js methods to achieve an effect. I personally think that the principle of the two methods is the same, but one effect has come out, and one has no effect and reported an error. If you want to know the reason for reporting an error, hope God for advice.

HTML Code: 

    
 requestAnimationFrame  seTtimeout :

    <div>
        <p class="ball red" style="margin-left:0px;">

        <p class="ball green" style="margin-left:0px;">

        <p class="ball blue" style="margin-left:0px;">

    </div>

CSS Code: 

        .ball {
            width: 20px;
            height: 20px;
            border-radius: 50%; 
        }
        
        .red {
            background-color: red;
        }
        
        .green {
            background-color: green;
        }
        
        .blue {
            background-color: blue;
        }

JavaScript Code method 1: 

        var red = document.querySelector(".red");
        var green = document.querySelector(".green");
        var blue = document.querySelector(".blue");

        ani(red, 100, function() {
            ani(green, 200, function() {
                ani(blue, 150, function() {
                    ani(red, 150);
                    ani(green, 150)
                })
            })
        })

        //
        function ani(node, to, callback) {
            animate();

            function animate() {
                var marginLeft = parseInt(node.style.marginLeft);
                if (marginLeft == to) {
                    callback && callback();
                } else {
                    if (marginLeft < to) {
                        marginLeftPP
                    } else if (marginLeft > to) {
                        marginLeft--
                    }
                    node.style.marginLeft = marginLeft + "px";
                    requestAnimationFrame(animate);
                }
            }
        }

effect is fine:

JavaScript:

:
clipboard.png

question: what is the difference between the two scenarios? Why is the second option wrong?

Html5 javascript
Apr.26,2021 
requestAnimationFrame(ani);

is equivalent to: 

requestAnimationFrame(function(){
    ani()
});

so here comes the problem. Every parameter in your ani function must be undefined, so it will make an error.

In addition, your first method, now that you use requestAnimationFrame, is essentially recursive logic, so instead of manually triggering the animate method, you can write requestAnimationFrame (animate) at the end.

Finally, to say something beside the point, you may have your own considerations, but if you are doing this translation effect, it is recommended that transform, work better than margin. 

function ani(node, to, callback) {
          
            var marginLeft = parseInt(node.style.marginLeft); //marginLeft
            
            if (marginLeft == to) {
                callback && callback();
            } else {
                if (marginLeft < to) {
                    marginLeftPP
                } else if (marginLeft > to) {
                    marginLeft--
                }
           
                node.style.marginLeft = marginLeft + "px";
                requestAnimationFrame(()=>ani(node, to, callback));
            }
        }

requestAnimationFrame (ani); means that the ani method is called every time the browser refreshes a frame to achieve the purpose of continuously calling the ani method (strictly speaking, it is not "continuous", but it is generally imperceptible to the naked eye).
you have called the ani method in the following code: 

        ani(red, 100, function() {
            ani(green, 200, function() {
                ani(blue, 150, function() {
                    ani(red, 150);
                    ani(green, 150)
                })
            })
        })

it's not ani, that you want to call continuously, but the part that controls movement in the body of the ani method, which is why your method one can run successfully.
method 2 cannot be run because 1. You don't need to run ani 2.ani continuously, but you don't pass it, which is equivalent to running ani (), so an error will be reported.

Previous: Vue to achieve click on the current unfold function?

Next: Node server snooping error problem

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu