Возникает переполнение стека из за рекурсии и цикла внутри.
Подскажите как можно по другому реализовать.
Вообщем задача была такая, есть горизонтальное меню с любым кол-вом элементов. Все пункты идут в одну линию. Если они не помещаются в контейнер, который во всю ширину выделенной ему области, то не поместившиеся пункты должны скрываться. Это всё должно происходить при загрузке страницы и при ресайзе окна браузера.
Сделал с использованием рекурсии и местами цикл.
В рекурсии делается проверка, всели пункты помещаются, если нет, то скрываем последний и проверяем снова, если скрывать не нужно, то проверяем поместится ли первый скрытый пункт, если да то показываем его и проверяем снова.
Цикл использовал для определения суммарной длинны всех видимых элементов (для сравнения в рекурсии)
Ниже привел код, из-за нескольких таких меню (4-6) на странице, при ресайзе виснет хром и ошибка о переполнение стека в консоли.
Подскажите выход пожалуйста, что-то додуматься до другого варианта не смог
function assayOne($this) {
if(($this).width() < widthChildren($this)) {
hideVisible($this)
assayOne($this)
}
else
assayTwo($this)
}
function assayTwo($this) {
var widthChildren = widthChildren($this)
var widthLastHidden = widthLastHidden($this)
if($this.children('.hide').length && $this.width() >= widthChildren + widthLastHidden) {
showHidden($this)
assayTwo($this)
}
}
function widthLastHidden($this) {
var hidden = $this.children('.hide').last()
var width = 0
hidden.removeClass('hide')
width = hidden.outerWidth(true)
hidden.addClass('hide')
return width
}
function widthChildren($this) {
var width = 0
var item = $this.children(':not(.hide)')
item.each(function() {
width = width + $(this).outerWidth(true)
})
return width
}
function showHidden($this) {
var hidden = $this.children(':not(.additional).hide').last()
hidden.removeClass('hide')
}
function hideVisible($this) {
var visible = $this.children(':not(.additional):not(.hide)').first()
visible.addClass('hide')
}
