crash du navigateur sur la fonction de redimensionnement

Question

J'essaie de créer une navigation de liste horizontale réactive, qui correspond à la non. d'éléments en fonction de la taille de l'écran. Les éléments qui ne correspondent pas, seront mis dans un menu déroulant. Cela fonctionne bien, mais maintenant je veux ré-exécuter le script sur le redimensionnement. Mais dès que j'appelle la fonction dans la fonction de redimensionnement, le navigateur se fige. Je suppose qu'il est coincé dans une boucle, mais je n'arrive pas à le déboguer. Est-ce que quelqu'un voit ce qui ne va pas?

function overflowDropdown() { 

     'use strict'; 


    // Define the context we will be operating in. 
     var list = '.action-menu ul'; 

     // Act only if the more tab is not created yet. 
     if (typeof $(list) != 'undefined' && $(list) != false && $(list).length > 0) { 

    // We will store any items here that we want to move. 
    var itemsToMove = new Array(); 

    // get window width 
    var windowWidth = $(window).width(); 

    // define how much items fit one the screen 
    var itemsFit = 1; 

    if (windowWidth > 450) { 
     itemsFit = 2; 
    } 
    if (windowWidth > 600) { 
     itemsFit = 3; 
    } 

    // Loop through all items and retrieve the index 
    $.each($('li', list), function(index, value) { 

     // Add everything except the first item to the items_to_move array. 
     if (index > (itemsFit - 1)) { 
     itemsToMove.push(value); 
     } 

    }); 

    // If there is more than one item to move we proceed here. 
    if (itemsToMove.length > 1) { 
    // Add our new container div. 
     $(list).append('<li class="action-overflowing"><a data-dropdown="#dropdown-action-menu" class="action-overflowing-trigger" href="#"><i class="icon icon-menu"></i> More </a><div id="dropdown-action-menu" class="dropdown dropdown-scroll"><ul class="dropdown-menu"></ul></li>'); 

     // Foreach items that need to moved place them in the newly created awesomebox dropdown. 
     $.each(itemsToMove, function(index, value) { 
     $('#dropdown-action-menu ul', list).append(value); 
     $('#dropdown-action-menu').hide(); 
     }); 
    } 

    } 

}; 

Redimensionner fonction:

(function($) { 

    var resizeTimer; // Set resizeTimer to empty so it resets on page load 

    function resizeFunction() { 
    // some other functions are here that do work 
    overflowDropdown() 
    }; 

    // On resize, run the function and reset the timeout 
    // 1000 is the delay in milliseconds. 
    $(window).resize(function() { 
    clearTimeout(resizeTimer); 
    resizeTimer = setTimeout(resizeFunction, 1000); 
    }); 

    resizeFunction(); 

})(jQuery); 

Answer 1

J'ai résolu le problème avec le clonage du menu et de quitter le menu original tel qu'il est. Maintenant, les scripts sont réinitialisés chaque fois qu'ils sont appelés

// This script creates a dropdown of the action menu, when there are more then 2 buttons. 

function overflowDropdown() { 

    // Define the context we will be operating in. 
    var list = $('.original-action-menu ul').clone(); 
    $('.original-action-menu').hide(); 



if ($('.action-menu').length) { 
    $('.action-menu').remove(); 
    } 

    // We will store any items here that we want to move. 
    var itemsToMove = new Array(); 

// get window width 
var windowWidth = $(window).width(); 

// define how much items fit on the screen 
var itemsFit = 1; 

if (windowWidth > 450) { 
    itemsFit = 2; 
} 
if (windowWidth > 600) { 
    itemsFit = 3; 
} 

// Loop through all items and retrieve the index 
$.each($('li', list), function(index, value) { 

    // Add everything except the first item to the items_to_move array. 
    if (index > (itemsFit - 1)) { 
    itemsToMove.push(value); 
    } 

}); 

// If there is more than one item to move we proceed here. 
if (itemsToMove.length > 1) { 
// Add our new container div. 
    $(list).append('<li class="action-overflowing"><a data-dropdown="#dropdown-action-menu" class="action-overflowing-trigger" href="#"><i class="icon icon-menu"></i> More </a><div id="dropdown-action-menu" class="dropdown dropdown-scroll"><ul class="dropdown-menu"></ul></li>'); 

    // Foreach items that need to moved place them in the newly created awesomebox dropdown. 
    $.each(itemsToMove, function(index, value) { 
    $('#dropdown-action-menu ul', list).append(value); 
    $('#dropdown-action-menu').hide(); 
    }); 
} 

list.insertAfter('.original-action-menu'); 
list.wrapAll('<div class="action-menu">'); 

};