I encountered a problem with my code when running it on certain viewport sizes. It seems to freeze, requiring me to close the tab.
I attempted to implement a backup script that would terminate the loop if it froze, but it hasn't been effective.
Could someone identify what's causing the freeze or point out any errors in the script?
The code is being executed on this site:
You can find the JS code here:
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");
});