Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/372.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
无休止的控制台日志,javascript不会离开函数requestAnimationFrame_Javascript_Canvas_Recursion_Requestanimationframe - Fatal编程技术网

无休止的控制台日志,javascript不会离开函数requestAnimationFrame

无休止的控制台日志,javascript不会离开函数requestAnimationFrame,javascript,canvas,recursion,requestanimationframe,Javascript,Canvas,Recursion,Requestanimationframe,我在控制台中得到无休止的“渲染”。。。为什么会发生这种情况?我想不出来(我一整天都在做这件事。你们能看看问题出在哪里吗 控制台: turnEvent render 10 times render Infunction: 150.458ms 6534 and counting times render var turnEvent = function turnEvent(AnX, AnY) { var first = true; console.time('Infunction'

我在控制台中得到无休止的“渲染”。。。为什么会发生这种情况?我想不出来(我一整天都在做这件事。你们能看看问题出在哪里吗

控制台:

turnEvent
render
10 times render
Infunction: 150.458ms
6534 and counting times render
var turnEvent = function turnEvent(AnX, AnY) {
    var first = true;
    console.time('Infunction');
    var lengd = rects.length, i;
    one30 = 10,
    one40 = 10,  
    one301 = false, 
    one401 = false;
    for (i = 0; i < lengd; i += 1) {
        if (collides([rects[i]], AnX, AnY)) {
            var rightBox = rects[i];
            var rectangle = rects2[i];
        }
    }
    console.log("turnEvent");
    rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, 'black', 'black');
    function render() {
        console.log("render"); <----------- ENDLESS CONSOLE LOGS

        -----some canvas drawings here------
        .......
       ----if and else conditions----
        if (one301 && one401) {
            rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, null, 'black');
            console.timeEnd('Infunction');
        }
    }
    (function animloop(){
        requestAnimationFrame(animloop);
        render();
    })();
}
代码:

turnEvent
render
10 times render
Infunction: 150.458ms
6534 and counting times render
var turnEvent = function turnEvent(AnX, AnY) {
    var first = true;
    console.time('Infunction');
    var lengd = rects.length, i;
    one30 = 10,
    one40 = 10,  
    one301 = false, 
    one401 = false;
    for (i = 0; i < lengd; i += 1) {
        if (collides([rects[i]], AnX, AnY)) {
            var rightBox = rects[i];
            var rectangle = rects2[i];
        }
    }
    console.log("turnEvent");
    rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, 'black', 'black');
    function render() {
        console.log("render"); <----------- ENDLESS CONSOLE LOGS

        -----some canvas drawings here------
        .......
       ----if and else conditions----
        if (one301 && one401) {
            rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, null, 'black');
            console.timeEnd('Infunction');
        }
    }
    (function animloop(){
        requestAnimationFrame(animloop);
        render();
    })();
}
var-turnEvent=函数turnEvent(AnX,任意){
var first=真;
控制台时间('Infunction');
var lengd=矩形长度,i;
一个30=10,
一个40=10,
one301=false,
one401=假;
对于(i=0;ilog(“render”);因为requestAnimationFrame将调用animloop,后者将执行另一个执行animloop等的requestAnimationFrame调用,这是一个递归操作

您需要在animloop中设置一个条件,以不调用requestAnimationFrame

(function animloop(){
    if(someConditionMet){
       //return without executing another requestAnimationFrame
       return;
    }
    requestAnimationFrame(animloop);
    render();
})();