Question

之前已经问过这个问题，我的代码正在运行。

问题在于脚本似乎冻结了一些奇怪的视口大小。除了杀掉标签，你无能为力。

我尝试编写一些备份，如果它被冻结将会杀死循环，但它似乎没有完成任务。

谁能告诉我什么错了？或者在剧本中向我显示一个导致冻结的错误？

这是运行代码的站点： http://unkn0wn3d.com

JS代码在那里： http://unkn0wn3d.com/css/pos.js

或在这里：

var pos = function(){
var containerW = $("article").width();
var containerH = $("article").height();
var langH = parseInt($( ".languages" ).position().top + $( ".languages" ).height());
var langW = parseInt($( ".languages" ).position().left + $( ".languages" ).width());
var creditW = parseInt($( ".credit" ).position().left - $(".link:first").width() + 15);
var positions = [];
var froze = false;
setTimeout(function(){froze=true;}, 2000)
$('.link').each(function() {
    var coords = {
        w: $(this).outerWidth(true)+5,
        h: $(this).outerHeight(true)+5
    };
    var success = false;
    while (!success)
    {
        coords.x = parseInt(Math.random() * (containerW-coords.w));
        coords.y = parseInt(Math.random() * (containerH-coords.h));
        var success = true;
        $.each(positions, function(){
            if (froze){return false;}
            if (
                (coords.x <= langW &&
                coords.y <= langH) ||
                (coords.x >= creditW &&
                coords.y <= langH) ||
                (coords.x <= (this.x + this.w) &&
                (coords.x + coords.w) >= this.x &&
                coords.y <= (this.y + this.h) &&
                (coords.y + coords.h) >= this.y)
            )
            {
                success = false;
            }
        });
    }
    positions.push(coords);
    $(this).css({
        top: coords.y + 'px',
        left: coords.x + 'px',
        display: 'block'
    });
})};

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

$(document).ready(
    pos()
);
$(window).resize(function () {
    waitForFinalEvent(function(){pos();}, 500, "resize");
});

Answer 1

你的while循环永远不会终止，因为你写了var success = true 您使用var重新定义了 success 变量，因此现在您有2个成功实例，而第一个实例永远不会设置为true，因此循环永远不会终止。尝试从var

中删除var success = true

Answer 2

你有两个问题。我看不到你在做什么，但A.link元素的大小只受视口高度的控制。因此，如果视口高而窄，则链接很大，而且根本无法将它们全部拟合。

第二个问题是，如果无法放置链接，您的代码将永远尝试。计时器永远不会触发，因为主脚本仍在忙着运行。而不仅仅是做

while (!success)

最好做一些有限的尝试：

var success = false;
for (var attempt = 0; !success && attempt < 50; attempt++)
{
     ....
}

通过限制尝试次数，即使链接重叠，它也会停止冻结。然后你可以删除冻结和计时器。更好的是在尝试次数增加时引入容差 - 因此允许它们重叠一点。

JS / Jquery div的随机位置

2 个答案: