Pourquoi est-ce code plus lent dans Firefox?

Question

<input type="text" id="sShState" />
$('#sShState').liveSearch(); // A plug-in
// inside plug-in:
$this = $(this);

// On focus I add a dropdown box and add li's;

var obj = '<ul id="ddList"></ul>';
$this.after(obj);
$this.next('ul').html(li's);

$('#ddList').live('mouseenter', function(){
    var $li = $this.next('ul').children('li');
    $li.removeClass('hoverLi');
    $li.hover(function(e){
        $li.filter('[last]').removeAttr('last');
        $(this).addClass('hoverLi');
    },function() {
        $li.filter('.hoverLi').attr('last', true);
        $li.filter('.hoverLi').removeClass('hoverLi');
    });

    $li.click(function(){
        selectLi($(this));
        removeList ();
    });
});

Dans Chrome, il est très très rapide !!

Mais dans Firefox lorsque la souris entre pour la première fois sur la ulbox il faut compter entre 1-2 sec jusqu'à ce qu'il commence à exécuter le code.

Même dans Internet Explorer 7, il fonctionne très bien. Le plané li reste un peu en arrière, mais il commence à exécuter immédiatement lorsque la souris entrer dans la zone ul.

Answer 1

Vous semblez avoir un code d'affectation d'événements à l'intérieur d'un autre événement. Donc, chaque fois que l'événement « mouseenter » a lieu, il est réattribuant les événements de « vol stationnaire » et « clic ». Vous devez joindre ces événements une fois en dehors de la fonction en direct ().

Je ne sais pas la structure de votre page, donc ce ne peut pas être tout à fait correct. Mais elle illustre le problème.

$('#ddList').live('mouseenter', function(){ 
    var $li = $this.next('ul').children('li'); 
    $li.removeClass('hoverLi');         
});

$('#ddList li').hover(function(e){  
      // $(this).filter('[last]').removeAttr('last');
      $(this).addClass('hoverLi');
},function() { 
      // $(this).filter('.hoverLi').attr('last', true);
      $(this).filter('.hoverLi').removeClass('hoverLi');
});

$('#ddList li').click(function(){
      selectLi($(this));  removeList ();      
});

Je ne suis pas tout à fait sûr de ce qui se passe dans votre code, mais si votre intention était de faire en sorte que les événements se joint dynamiquement créé des éléments « li », alors vous devez utiliser .live () comme vous avez fait pour 'mouseenter'.

$('#ddList li').live('mouseover', function() {...

$('#ddList li').live('mouseout', function() {...

$('#ddList li').live('click', function() {...

EDIT: Explication de clic () vs en direct ()

Si j'ai un <div id='mydiv'></div> en HTML, alors tout ce que je dois faire est assigner ce qui suit pour joindre un événement click:

$('#mydiv').click(function() {
    // whatever I want to do on click
});

Mais si le div est ajouté dynamiquement au DOM, alors je peux utiliser en direct () au lieu, et jQuery attribuera automatiquement un événement chaque fois que j'ajouter dynamiquement l'élément.

$('#mydiv').live('click', function() {
    // whatever I want to do on click
    // jQuery takes care of assigning it to mydiv when dynamically added to DOM
});