使用“jquery”的函数的奇怪行为

发布于 2024-12-23 13:00:15 字数 853 浏览 0 评论 0原文

功能比较简单。当你点击按钮时，一个物体就会掉下来。如果再次按下按钮，物体会回到其随机位置并再次以相同的速度落下。但每次我单击按钮时，它（边缘顶部）都会变得更快。我不明白为什么？

HTML

<button id="fall" onclick="show_up()"> random-fall </button>
<div id="box" style="width:20px;height:20px;background:blue;">   </div>

脚本

var top;

function show_up() {
        top = 0;
        $("#box").css("margin-top", top);
        var rand = Math.random() * 500;
        rand = parseInt(rand);

        $("#box").css("margin-left", rand);

        fall_out();
    }

function fall_out() {
        top++;
        if (top < 500) {
            $("#box").css("margin-top", top);
            window.setTimeout('fall_out()', 10);
        }
        else {
            top = 0;
            fall_out();

        }
}

谁能告诉我解决这个问题的最佳方法吗？

原文

The function is relatively simple. When you click the button, an object will fall down. if you press the button again, the object go back to its random position and fall down again at the same speed.
but everytime I click the button, it (margin-top) gets much faster. I don't understand why?

HTML

<button id="fall" onclick="show_up()"> random-fall </button>
<div id="box" style="width:20px;height:20px;background:blue;">   </div>

Script

var top;

function show_up() {
        top = 0;
        $("#box").css("margin-top", top);
        var rand = Math.random() * 500;
        rand = parseInt(rand);

        $("#box").css("margin-left", rand);

        fall_out();
    }

function fall_out() {
        top++;
        if (top < 500) {
            $("#box").css("margin-top", top);
            window.setTimeout('fall_out()', 10);
        }
        else {
            top = 0;
            fall_out();

        }
}

Could anyone tell me the best way to solve it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

指尖微凉心微凉 2024-12-30 13:00:15

您的代码的问题是 fall_out() 永远不会停止。它会继续调用自己。阅读您的评论@Joop Eggen的回答后，这似乎是理想的行为。

当您第二次调用 show_up() 时，fall_out() 将再次调用，从而导致第二个无限循环强>。这就是为什么你的对象会更快下落，fall_out() 会比第一次更频繁地被调用（因为有 2 个递归循环）。

您不得在 show_up() 中多次调用 fall_out()。您可以设置一个像这样的变量 (started< /代码>）：

var top;
var started = false; // fall_out() has not been called yet

function show_up() {
        top = 0;
        $("#box").css("margin-top", top);
        var rand = Math.random() * 500;
        rand = parseInt(rand);

        $("#box").css("margin-left", rand);

        if(!started){
            started = true; //going to start the endless recursion function
            fall_out();
        }            
}

function fall_out() {
        top++;
        if (top < 500) {
            $("#box").css("margin-top", top);
            window.setTimeout(fall_out, 10); //note that it's not nice to call setTimeout with a string as argument
        }
        else {
            top = 0;
            fall_out();

        }
}

The problem with your code is that fall_out() will never stop. It'll go on calling itself. After reading your comment @ Joop Eggen's answer it seems to be desired behavior.

When you call show_up() a second time, fall_out() will be called again which results in a second infinite loop. That's the reason why your object is going to fall faster, fall_out() will be called more often than the first time (because of the 2 recursive loops).

You must not call fall_out() in show_up() more than once. You can e.g. set a variable like this (started):

var top;
var started = false; // fall_out() has not been called yet

function show_up() {
        top = 0;
        $("#box").css("margin-top", top);
        var rand = Math.random() * 500;
        rand = parseInt(rand);

        $("#box").css("margin-left", rand);

        if(!started){
            started = true; //going to start the endless recursion function
            fall_out();
        }            
}

function fall_out() {
        top++;
        if (top < 500) {
            $("#box").css("margin-top", top);
            window.setTimeout(fall_out, 10); //note that it's not nice to call setTimeout with a string as argument
        }
        else {
            top = 0;
            fall_out();

        }
}

回复收藏 0 原文