setTimeout () et les paramètres de réglage

J'ai quelques jQuery code qui ressemble à ceci:

$('.mainNav2 > li').mouseleave(function(){
    var someNum = Math.random();
    $(this).attr('id', someNum);
    var t = setTimeout("HideMenu(someNum)", 200);
    $('li.clicked').mouseenter(function() {
        clearTimeout(t);
    });
});

function HideMenu(id) {
    $('#'+id).removeClass('clicked');
}

Dont le but est de cacher un mega menu sur la souris quitter, mais prend également en compte accidentelle de la souris feuilles, à l'aide d'un 300 millisecondes setTimeout. Si l'utilisateur amène le pointeur de la souris en arrière dans le li à moins de 300 millisecondes, le menu n'est pas caché, car clearTimout(t) est appelée.

Le problème, c'est quand l'utilisateur N'a l'intention de mouseout, la fonction dans le setTimout n'est pas appelée. Selon cette page: http://www.w3schools.com/js/js_timing.asp ma syntaxe est correcte, mais je ne peux faire le HideMenu une fonction appelée dans le setTimeout si je l'écris comme ceci:

var t = setTimeout(HideMenu, 300);

Pourquoi n'est-il pas de travail comme l'écrit, où je peux passer une variable dans la fonction en tant que paramètre?

source d'informationauteur Ben

jquery settimeout

13

Et le marquage de la réponse correcte est une méthode de réalisation de cette... je ne crois pas que c'est la bonne.

Voir plus loin le JS Fiddle:
http://jsfiddle.net/PWHw3/

Ce que nous faisons ici est fondamentalement:
```
setTimeout(function, timeout, param);
```
Exemple:
```
var test = function(a){
    var b = (a) ? a : "fail";
    alert(b);
};
setTimeout(test, 500, "works");
```
Cela fonctionne pour moi, et élimine la nécessité de passer à travers deux fonctions.
13

Pour le faire fonctionner, et de le faire sans l'aide de la méchante version eval de setTimeout changement:
```
var t = setTimeout("HideMenu(someNum)", 200);
```
:
```
var t = setTimeout(function(s) {  
                 return function() { HideMenu(s) } }(someNum), 200);
```
De cette façon, vous passez la valeur de someNum dans la variable s dans le champ d'application de la setTimeout.
3

setTimeout accepte une fonction et un millième de seconde de retard. La fonction peut être soit une référence à une fonction ou une chaîne de caractères qui sera évaluée lorsque le délai d'extinction des incendies. Votre séquence actuelle ressemble à ceci:
- mouseleave fonction
  - affecter la variable someNum une valeur. someNum est portée à
    la fonction actuelle
  - régler une minuterie pour évaluer la chaîne "HideNum(someNum)" après 200ms.
  - fin de la fonction, laissez portée de la fonction
- 200ms passe
- "HideNum(someNum)" est évaluée. Il doit lever une exception, comme la variable someNum est pas défini. C'est pourquoi HideNum n'est pas appelé - vérifier les erreurs dans votre console.
Ce que vous voulez est une fonction de référence, qui maintiendra votre someNum dans le champ d'application (via la fermeture lesquelles vous pouvez lire sur).
```
setTimeout(function() { 
  HideNum(someNum); 
}, 200);
```
Vous trouverez la Mozilla docs une meilleure référence pour le JavaScript. Voici la de la fenêtre.setTimeout docs.

Ce que vous voulez faire est de créer une fonction anonyme et appel que l'appel de setTimeout.

setTimeout(function() { HideMenu(someNum) }, 200);

Si j'ai correctement comprendre ce que vous voulez faire, cependant, vous ne devriez pas avoir à se préoccuper de la définition d'un id et tout le reste. Quelque chose comme cela devrait le faire:

$('.mainNav2 > li').mouseleave(function() {
  var $this = $(this);
  var t = setTimeout(function() {
    $this.removeClass('clicked');
  }, 200);
  $('li.clicked').mouseenter(function() {
    clearTimeout(t);
  });
});

1

Il ya plusieurs façons de le faire.

1. Utiliser une fonction anonyme (recommandé)
```
setTimeout(function() {
    hideMenu('someNum');
}, 200);
```
2. setTimeout et setInterval ont une fonctionnalité cachée: vous pouvez spécifier des paramètres après l'expiration du délai.
```
setTimeout(hideMenu, 200, params);
```
Puisque vous êtes déjà à l'aide de jQuery, vous ne devriez pas faire une fonction distincte, mais d'étendre jQuery, prototype au lieu de cela, comme ceci:
```
jQuery.fn.hideMenu = function() {
    this.removeClass('clicked');
    return this;
};
```
Utilisation:
```
$('#num').hideMenu();
```
Remarquez que vous n'avez pas besoin de passer this de jQuery lorsque vous êtes à l'extension de son prototype, car il est déjà passé à jQuery. Et return this; est nécessaire pour garder la possibilité de chaînage.

Si vous choisissez cette voie, vous devez utiliser une fonction anonyme, il n'y a pas de moyen plus facile.

Mise à jour

Il y a déjà un plugin pour ça: jQuery.hoverIntent(). Pas besoin de le faire vous-même. Il est facile à utiliser, il suffit de remplacer mouseleave événement:
```
$('#someNum').hoverIntent(jQuery.noop, function() {
    //your function goes here
});
```
Il est important de le faire de cette façon, puisque le premier est le mouseenter gestionnaire, et le second est le mouseleave gestionnaire. jQuery.noop est une fonction vide, c'est effectivement la même que function() {}.

Parce que vous êtes à l'écriture d'une chaîne de caractères, ce qui n'est pas aussi intelligent que d'un réel fermeture.

$('.mainNav2 > li').mouseleave(function(){
    var someNum = Math.random();
    $(this).attr('id', someNum);
    var t = setTimeout(function() { HideMenu(someNum); }, 200);
    $('li.clicked').mouseenter(function() {
        clearTimeout(t);
    });
});

function HideMenu(id) {
    $('#'+id).removeClass('clicked');
}

Vous devez vous connecter pour publier un commentaire.

Mise à jour