jquery无限循环（移动一个div位置）答案

【问题标题】：jquery infinite loop (to move a div position)jquery无限循环（移动一个div位置）
【发布时间】：2014-12-26 18:17:01
【问题描述】：

我有以下 jquery 代码将矩形从一个地方移动到另一个地方。它有效。

jQuery(function ($) {
    $(document).ready(function () {
        loop_pos = function () {
            var docHeight = $(document).height(),
                docWidth = $(document).width(),
                $div = $('#test'),
                divWidth = $div.width(),
                divHeight = $div.height(),
                heightMax = docHeight - divHeight,
                widthMax = docWidth - divWidth;

            $div.css({
                left: Math.floor(Math.random() * widthMax),
                top: Math.floor(Math.random() * heightMax)
                // here
            });
        }
        // or here
    });
});

现在，我想让这个矩形在无限循环中自动改变它的位置。我尝试在 //这里也 // 或这里调用函数 loop_pos，但它不起作用，我不知道该怎么做。

另一种解决方案可能是 setTimeout() 但我无法使其工作。请一点帮助。谢谢。

【问题讨论】：

查看 JavaScript setInterval 函数。您可能还希望考虑使用 CSS 动画而不是 jQuery。
代码应该被重构。像宽度和高度这样的变量应该只计算一次，而不是每次调用。如果您需要刷新它们，请在窗口的调整大小事件上添加一个侦听器。您希望动画以什么速率运行（每秒调用多少次？）
or here 是你的答案：jsfiddle.net/RokoCB/fzj0m52j
我真的认为这需要一些解释和优化。
Just for fun 使用 animate 属性而不是 CSS。

标签： javascript jquery infinite-loop

【解决方案1】：

首先，重构，这样您就不会在每次函数调用时计算宽度和高度。

然后使用 setInterval 每隔n 毫秒调用一个函数：

jQuery(function($) {
     // No need for document.ready cause jQuery is made to execute this function when the doc is ready.
     // initialize variables
     var $div = $('#test'),
     delay = 1000, // ms
     docHeight,
     docWidth,
     divWidth,
     divHeight,
     heightMax,
     widthMax;
     function onResize(){
         //update them
         docHeight = $(document).height();
         docWidth = $(document).width();
         divWidth = $div.width();
         divHeight = $div.height();
         heightMax = docHeight - divHeight,
         widthMax = docWidth - divWidth;
     }
     function loop_pos(){
         $div.css({
            left: Math.floor(Math.random()*widthMax),
            top: Math.floor(Math.random()*heightMax)
            // here
         });
      }
      // Calculate for the first time
      onResize();
      // Add event listener
      $(window).resize(onResize);
      // run loop
      setInterval(loop_pos, delay); // 1000 ms = 1 second
});

见小提琴：

http://jsfiddle.net/5f4quu8u/

【讨论】：

【解决方案2】：

"or here" 是你的答案，只需重构你的代码以防止在不需要时运行你的 DOM：

jsFiddle demo

$(document).ready(function() {

    var $div = $('#test'), x, y;

    function getSizes(){
        x = $(document).width() - $div.width();
        y = $(document).height() - $div.height();
    } 
    function loop_pos(){
        $div.css({ // or use `.animate` instead of `.css`
            left: ~~(Math.random() * x),
            top:  ~~(Math.random() * y)
        });
    }

    getSizes();                         // Get them immediately
    $("window").on("resize", getSizes); // Update values on Win. resize
    setInterval(loop_pos, 1000);

});

【讨论】：

【解决方案3】：

好吧，我首先将您的代码移到 $(document).ready() 部分之外，并将其声明为单独的函数。

function moveDiv(){
   var docHeight = $(document).height();
   docWidth = $(document).width();
   $div = $('#test');
   divWidth = $div.width();
   divHeight = $div.height();
   heightMax = docHeight - divHeight;
   widthMax = docWidth - divWidth;

   $div.css({
       left: Math.floor(Math.random()*widthMax),
       top: Math.floor(Math.random()*heightMax)
   });
}

然后你可以在 javascript 中使用 SetInterval 函数。

$(document).ready(function() {
    var delay = 1*1000; //would move the div every 1 second
    setInterval( moveDiv , delay );
});

我认为应该这样做。（鉴于您的代码在我看来应该有效！）

【讨论】：