Question

var slideFunction3 = function() {
  var posx = Math.floor(Math.random() * ($(document).width()));
  var posy = Math.floor(Math.random() * ($(document).height()));
  $("#div3").css("background-color", "red");
  $("#div3").css({top: posy, left: posx, position:'absolute'});
  slideFunction3();
};

// add the handler and slide up the first div
$("#div1").click(slideFunction);
$("#div2").mouseover(slideFunction2);
$("#div3").click(slideFunction3);

当我单击div3时，它会移动到一个随机位置，但不会一遍又一遍地移动它。我该如何解决？

我找到了一个解决方案，是：

    var  slideFunction3 = function() {
    var posx = Math.floor(Math.random() * ($(document).width()-100));
    var posy = Math.floor(Math.random() * ($(document).height()-100));
    $('#div3').animate({ top: posx, left: posy },'slow', function(){
        slideFunction3();        
    });

};
// add the handler and slide up the first div
$("#div1").click(slideFunction);
$("#div2").mouseover(slideFunction2);
$("#div3").click(slideFunction3);

Answer 1

您的函数不会运行一次，而是递归运行，每次在堆栈上分配更多空间，直到堆栈溢出为止。

这是stackoverflow的答案，解释了stackoverflow： Link

根据您的代码，我假设您尝试在无限长的时间内随机移动div元素。您可以延迟函数调用以实现此目的。

您可以使用setInterval调用以在特定时间间隔内连续地连续调用该函数作为延迟，或者也可以使用setTimeout调用从其中递归地调用该函数。

这是使用setInterval进行操作的方式。

//Your function
var recursiveFunction = function() {
   // code for placing the div randomly
};

//This will call the function continuously in a time delay of 100ms
var intervalID = setInterval(recursiveFunction, 100);

//This call clears the interval and stops the function from being called.
clearInterval(intervalID);

参考文献：

setInterval Reference

setTimeout Reference

递归函数jquery只运行一次

1 个答案: