JS/Jquery divのランダムポジション

Question

これまでに質問されているので、コードを実行しています。

問題は、スクリプトが凍っていると思われるいくつかの奇妙なビューポートサイズが原因です。 あなたができることは何もありませんが、タブを殺す。

私は凍ったループを殺すようなスクリプトを作成しようとしましたが、仕事が終わったようではありません。

誰も私に何が間違っていると言うことができますか？または、私は凍結の原因となるスクリプトに一般的なエラーを表示しますか？コードが実行されているサイトザッツ

： http://unkn0wn3d.com

JSコードはeithereあります： 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

問題が2つあります。私はあなたがそれをやっているところは見ませんが、A.link要素の大きさはビューポートの高さによってのみ制御されています。したがって、ビューポートの背が高くて狭い場合、リンクが大きく、それらをすべてフィットさせるのは不可能です。

第2の問題は、リンクを配置できない場合、コードは永遠に試し続けることです。メインスクリプトがまだ実行中であるため、タイマーは起動しません。ただ

while (!success) 

を行うのではなく、試みの限られた数を行う方が良いでしょう：

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

それが凍結停止します試行回数を制限することにより、リンクが重なったままにされている場合でも。その後、凍結やタイマーを取り除くことができます。 試行回数が増えるにつれて許容差を導入する方が良いでしょう。そのため、少し重なり合うことが許されています。

Answer 2

あなたのwhileループを使用して、以来、その中に終了したことがありません書きましたvar success = true 成功変数を再度usiで定義し直しましたしたがって、今度は2つのインスタンスの成功があり、最初のループは決してtrueに設定されないので、ループは終了しません。 varを削除してみてくださいvar success = true