jQuery .resize() не запускает функцию

Question

Я написал функцию для изменения размеров блоков меню на моем веб-сайте. Затем я устанавливаю функцию для выполнения в загружаемом окне и в изменяющемся размере окна. Он работает, как и ожидалось, с .load(), но он не имеет никакого эффекта на .resize(). Я вижу, что эта функция вызывается, потому что она срабатывает, но она не выполняет фактическое изменение размера функции.

Я знаю, что эта функция работает, потому что если вы обновляете окно, она вызывает изменение размера функции и блоков меню. Я также знаю, что .resize() и функция достигнуты, потому что она вызывает предупреждения при изменении размера окна, но функция фактически не изменяет размеры разделов.

Я пробовал его с помощью .bind('resize', function() {}), $(window).onresize = changeWidth(); и используя setInterval(function() {}, 300), а затем проверял, изменился ли размер окна, и все они имеют одинаковый результат.

Моя функция выглядит следующим образом:

function changeWidth() { 
 
    alert('resized'); 
 
    var widestBlock = 0; 
 
    $('.menu-block').each(function() { 
 
    if ($(this).width() > widestBlock) { 
 
     widestBlock = $(this).width(); 
 
    } 
 
    }); 
 

 
    $('.menu-block').each(function() { 
 
    $(this).width(widestBlock); 
 
    }); 
 
}

И затем я вызвать функцию с .load() и .resize()

$(window).load(changeWidth()); 
 
$(window).resize(function() { 
 
    changeWidth(); 
 
    alert('hola'); 
 
});

Answer 1

UPDATE: ИЗГОТОВЛЕНИЮ меню компонент

Мы должны иметь меню, в котором их элементы имеют одинаковую ширину, рассчитанную на самый широкий пункт или ширины окна.

function MenuCtrl($) { 
 
    var self = this; 
 

 
    // set it to true if you want to calculate on the available width  
 
    self.basedOnWindowWidth = false; 
 

 
    self.selector = '#resizableMenu'; 
 
    self.menu = $(self.selector); 
 
    self.meta = null; 
 
    
 
    self.updateItemsWidth = function() { 
 
    var id = 'resizableMenuStyle'; 
 
    var style = $('#' + id); 
 
    
 
    if(style.length < 1) { 
 
     style = $('<style />', { 
 
     id: id 
 
     }).appendTo('head'); 
 
    } 
 
    
 
    style.html(self.selector + ' a { width: '+ self.meta.maxWidth +'px; }'); 
 
    return self; 
 
    }; 
 
    
 
    self.study = function studyMenu() { 
 
    var res = { 
 
     itemsCount: 0, 
 
     maxWidth: 0, 
 
     width: 0, 
 
     height: 0 
 
    }; 
 
    
 
    var items = self.menu.find('> li'); 
 
    
 
    res.itemsCount = items.length; 
 
    res.width = self.menu.outerWidth(); 
 
    res.height = self.menu.outerHeight(); 
 
    
 
    if(self.basedOnWindowWidth) { 
 
     res.maxWidth = window.innerWidth; 
 
    } else { 
 
     items.each(function(index, item) { 
 
     width = $(item).width(); 
 
     
 
     (res.maxWidth > width) || (res.maxWidth = width); 
 
     }); 
 
    } 
 
     
 

 
    self.meta = res; 
 
    return self; 
 
    }; 
 
    
 
    self.study().updateItemsWidth(); 
 
    
 
    var semaphore; 
 
    $(window).resize(function(event) { 
 
    window.clearTimeout(semaphore); 
 
    
 
    semaphore = window.setTimeout(function() { 
 
     return $ 
 
     .when(console.count('Window Resize End')) 
 
     .then(function() { 
 
      return self.study(); 
 
     }) 
 
     .then(function() { 
 
      return console.log('menu metadata after resizing', self.meta); 
 
     }) 
 
     .then(function() { 
 
      self.updateItemsWidth(); 
 
     }) 
 
     ; 
 
    }, 200); 
 
    }); 
 
} 
 

 
jQuery(document).ready(MenuCtrl);

*, *:after, *:before { 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, body, .nav { 
 
    padding: 0; 
 
    margin: 0; 
 
    max-width: 100%; 
 
} 
 

 
.nav { 
 
    list-style: none; 
 
    display: inline-block; 
 

 
    background: red; 
 
} 
 

 
.nav a { 
 
    display: inline-block; 
 
    padding: .5em 1.5em; 
 
    background: yellow; 
 
    
 
    transition: 400ms width linear; 
 
} 
 
.nav li { 
 
    margin: .5em 0; 
 
    max-width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="resizableMenu" class="nav nav-resizable"> 
 
    <li><a href="#">1 - lorem</a></li> 
 
    <li><a href="#">2 - lorem</a></li> 
 
    <li><a href="#">3 - lorem</a></li> 
 
    <li><a href="#">4 - lorem</a></li> 
 
    <li><a href="#">5 - lorem</a></li> 
 
    <li><a href="#">6 - lorem</a></li> 
 
    <li><a href="#">7 - lorem</a></li> 
 
    <li><a href="#">8 - lorem</a></li> 
 
    <li><a href="#">9 - lorem</a></li> 
 
    <li><a href="#">10 - lorem</a></li> 
 
    <li><a href="#">11 - lorem</a></li> 
 
    <li><a href="#">12 - lorem</a></li> 
 
    <li><a href="#">13 - lorem</a></li> 
 
    <li><a href="#">14 - lorem</a></li> 
 
    <li><a href="#">15 - lorem Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</a></li> 
 
    <li><a href="#">16 - lorem</a></li> 
 
    <li><a href="#">17 - lorem</a></li> 
 
    <li><a href="#">18 - lorem</a></li> 
 
    <li><a href="#">19 - lorem</a></li> 
 
    <li><a href="#">20 - lorem Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</a></li> 
 
    <li><a href="#">21 - lorem</a></li> 
 
    <li><a href="#">22 - lorem</a></li> 
 
    <li><a href="#">23 - lorem</a></li> 
 
</ul>

---

Попробуйте EXEC ваш Fn на событие resizeEnd!

function resizeView() { 
 
    // do what you want 
 
    console.count('Called resizeView'); 
 

 
} 
 

 
var semaphore; 
 
jQuery(window).load(resizeView).resize(function(event) { 
 
    window.clearTimeout(semaphore); 
 
    
 
    semaphore = window.setTimeout(resizeView, 200); 
 
};

Answer 2

После того, как вы начали Вы можете попытаться сделать это:

function changeWidth() { 
    var widestBlock = 0; 
    $('.menu-block').each(function() { 
    if ($(this).width() > widestBlock) { 
     widestBlock = $(this).width(); 
     console.log(widestBlock) 
    } 
    }); 

    $('.menu-block').each(function() { 
    $(this).width(widestBlock); 
    }); 
} 


$(window).load(function(){ 
    changeWidth(); 
}) 

$(document).ready(function(){ 
    $(window).resize(function() { 
     changeWidth(); 

    }); 
});