JS/Jquery Tanrının rasgele konumu

Question

Bu daha önce sorulmuş ve kodumu çalıştırdım.

Sorun, bazı tuhaf görünümlerde, komut dosyasının donma gibi görünüyor. Yapabileceğin bir şey yok ama sekmeyi öldür.

Donmuşsa döngüyü sonlandıracak bir yedekleme komut dosyası oluşturmaya çalıştım, ancak bu iş bitmiş gibi görünmüyor.

Bana neyin yanlış olduğunu söyleyen var mı? Ya da genel olarak senaryodaki bir hatayı, donmaya neden olan şeyleri göster? sitede Thats

kod çalıştıran burada: http://unkn0wn3d.com

JS Kod eithere vardır: Burada http://unkn0wn3d.com/css/pos.js

ya:

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 sorununuz var. Nerede olduğunu görmüyorum, ancak A. Link öğelerinizin boyutu yalnızca görünümün yüksekliği ile denetleniyor. Öyleyse, eğer görüş alanı uzun ve dar ise, o zaman bağlantılar büyüktür ve hepsini sığdırmak imkansızdır.

ikinci sorunu bağlantılar kodunuzu yerleştirilemez ise sonsuza kadar çalışıyor tutar olmasıdır. Ana betik hala meşgul olduğu için zamanlayıcı asla yanmaz. Sadece

while (!success) 

yapmak yerine denemelerinin sınırlı sayıda yapmak daha iyi olurdu:

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

o dondurma durur denemeden sayısını sınırlayarak, bağlantılar örtüşen bırakılır bile. Daha sonra donma ve zamanlayıcıyı kaldırabilirsiniz. Daha da iyisi girişimleri sayısı arttıkça bir tolerans tanıtmak olacak - bu yüzden biraz üst üste izin verilir.

Answer 2

Sizin döngü içine beri sonlandırır asla ederken size var success = true yazdı başarı değişkenini yeniden usi tarafından yeniden tanımladınız ng var, bu yüzden şimdi başarısının başarısının 2 örneğini aldınız ve ilki asla hiçbir zaman doğru olmayacak, böylece döngü hiçbir zaman sona ermeyecek.dosyasını kaldırmayı deneyin. var success = true