Come fermare un timer (setTimeout)

[Marco_88]

Ciao a tutti, ho realizzato questo script per far apparire una semplice finestra per l'iscrizione alla newsletter, solo che non riesco proprio a trovare un modo per fermare il timer che la attiva.

<script>
 
			    function openDialog(selector) {
				    $(selector)
				    .clone()
				    .appendTo('#overlay')
				    .show()
				    .parent()
				    .fadeIn('fast')
				  
			    }

			    function closeDialog(selector) {
				    $(selector)
				    $(selector)
				    .fadeOut('fast')
				    .hide()
				
			    }

 
			    var timeOut = setTimeout(function() {
				    openDialog('#newsletter')
			    }, 8000);

			 // se la classe .ok o .cancel è stata selezionata disattiva il timer 
			    $('.ok','.cancel').click(function() {
				    closeDialog('#newsletter');
				    clearTimeout(timeOut);
			    });

			    </script>

 

[WmbertSea]

Ciao, a prima vista credo che il problema sia nel selettore jQuery:

             // se la classe .ok o .cancel è stata selezionata disattiva il timer 
                $('.ok','.cancel')

Scritto in quel modo non rispecchia ciò che hai indicato nel commento ma nello specifico va a selezionare gli elementi con classe "ok" che però sono discendenti di un elemento con classe "cancel". Infatti il secondo parametro, se specificato, indica di filtrare la ricerca considerando tale selettore come contesto (cioè come livello di partenza da cui iniziare la ricerca).

Vedi documentazione: http://api.jquery.com/jquery/#selector-context

Suppongo che il problema sia proprio questo.
Se vuoi ottenere quanto indicato nel tuo commento, dovrai scrivere il selettore in questo modo:

$('.ok, .cancel')

Si tratta di un selettore multiplo.
Nota che la virgola c'è ma fa sempre parte della stringa indicata come primo argomento; non c'è un secondo argomento.

 

[Marco_88]

WmberSea intanto grazie per avermi fatto notare l'errore. Ora l' ho corretto ed ho verificato la selezione con l'unica tecnica che conosco ed il risultato è 2 elementi selezionati:

///elementi selezionati////
$(document).ready(function() {
alert($('.ok, .cancel').length + ' elementi selezionati');
});

// 2 elementi selezionati

Mentre nella maniera in cui avevo fatto io mi restituiva 0.

///elementi selezionati////
$(document).ready(function() {
alert($('.ok', '.cancel').length + ' elementi selezionati');
});

// 0 elementi selezionati.

Il timer però ancora non si interrompe e credo che sia dovuto al fatto che quando faccio click sulla classe .ok o .cancel il comportamento di default del collegamento "#" ricarica la pagina e di conseguenza il timer riparte:

<div id="overlay">
	<div id="blanket"></div>
</div>

<div id="newsletter" class="dialog">
	<h4>Registrati alla Newsletter per ricevere tutte le imperdibili promozioni!</h4>
	<br/>
	      <div class="buttons">
	         <a href="<?php echo $abs_path . "/" . $_SESSION['www']['lang'] ?>/register" class="ok">Si, registrami</a>    </br>
	         <a href="#" class="cancel">No,grazie</a>
	      </div>
</div>

var timeOut = setTimeout(function() {
				    openDialog('#newsletter')
			    }, 8000);

//impedisco al collegamento di aprirsi
$('#newsletter','a[href=#]').click(function(event) {
		event.preventDefault();
});
			    
// se la classe .ok o .cancel è stata selezionata disattiva il timer 
$('.ok, .cancel').click(function() {
		closeDialog('#newsletter')
		clearTimeout(timeOut);
});

Tuttavia la selezione che effettuo per eseguire il preventDefault() non ha alcun effetto e verificando con un alert il risultato è 0:

//verifico la selezione
$(document).ready(function() {
   alert($('#newsletter', '.buttons', 'a[href=#]').length + ' elementi selezionati');
});

// 0 elementi selezionati

Dove può essere l'inghippo?

 

[WmbertSea]

WmberSea intanto grazie per avermi fatto notare l'errore.

Figurati. Intanto però continui a cadere nello stesso tipo di errore.
Questi selettori non hanno molto senso (il motivo è sempre quello spiegato nella mia precedente risposta):

$('#newsletter','a[href=#]')

$('#newsletter', '.buttons', 'a[href=#]')

Questo mi da l'impressione che, della mia precedente risposta, tu ti sia limitato a prendere solo l'ultimo pezzettino di codice corretto, senza capire la reale causa dell'errore. Non voglio essere polemico ma posso solo supporre che sia per la tua fretta nel risolvere, o magari semplicemente per pigrizia, che tu non abbia considerato quanto ti ho indicato. Se invece non hai compreso qualcosa, in quello che ti ho indicato, fammi sapere, così posso cercare di chiarirtelo.

A parte questo, puoi semplicemente mettere il preventDefault() all'interno dello stesso evento click già definito, quindi inglobare il tutto:

// se clicco su .cancel
$('#newsletter .cancel').click(function(event){
  event.preventDefault(); // impedisco al collegamento di aprirsi
  clearTimeout(timeOut); // disattivo il timer 
  closeDialog('#newsletter'); // chiudo la finestra di dialogo
});

Nota, inoltre, che in questo caso ho volutamente selezionato solo il ".cancel" (specificando anche che deve trovarsi dentro #newsletter) ma ho lasciato escluso il pulsante ".ok" perché questo va comunque ad aprire una nuova pagina, per cui non ha alcun senso disattivare il timer e chiudere il dialog.

Verifica inoltre la correttezza di questa parte:

href="<?php echo $abs_path . "/" . $_SESSION['www']['lang'] ?>/register"

Non so se siano errori dovuto alla trascrizione qui sul forum, ma non vedo la chiusura del codice PHP e mi pare ci sia qualche conflitto/problema con gli apici. Vedi tu.


EDIT: rivedendo meglio il tutto, non mi è chiara una cosa. Se i pulsanti stanno dentro il dialog, il quale è stato aperto attraverso il timer, non vedo il senso di cancellare lo stesso timer che di fatto dovrebbe essere terminato.. ???

 

[Marco_88]

L'errore che ho commesso lo ho capito, mi sono andato a vedere il link sulla guida jquery che mi hai allegato.
Quello che ho cercato di fare qui sotto era un tentativo di essere più selettivo, per raggiungere l'elemento che mi interessava (a href="#").

Quando ho scritto questa parte mi sono ispirato a quello che mi avevi detto:

Infatti il secondo parametro, se specificato, indica di filtrare la ricerca considerando tale selettore come contesto (cioè come livello di partenza da cui iniziare la ricerca).

$('#newsletter','a[href=#]')

$('#newsletter', '.buttons', 'a[href=#]')

EDIT: rivedendo meglio il tutto, non mi è chiara una cosa. Se i pulsanti stanno dentro il dialog, il quale è stato aperto attraverso il timer, non vedo il senso di cancellare lo stesso timer che di fatto dovrebbe essere terminato.. ???

Da principiante ho pensato mentalmente questa cosa :
Dopo tot tempo di apertura della pagina (es. 8 secondi) visualizzo il pop-up per l'iscrizione della newsletter, se l'utente clicca "sì" lo rimando all'iscrizione, se clicca "no" non faccio più visualizzare il pop-up (interrompo il timer o la visualizzazione del pop-up?).

Sicuramente è il metodo di svolgimento che è sbagliato poiché non ho molta esperienza in jquery, ed ho cercato di farla nella maniera più vicina alle mie capacità.

p.s. il tag di chiusura di php c'è, errore di trascrizione.

 

[WmbertSea]

Quello che ho cercato di fare qui sotto era un tentativo di essere più selettivo, per raggiungere l'elemento che mi interessava (a href="#").

Quando ho scritto questa parte mi sono ispirato a quello che mi avevi detto:

No, quello che hai scritto è sbagliato in qualunque caso e non rispecchia ciò che ti ho indicato. Ti direi che probabilmente non mi sono spiegato bene io ma, se mi dici che hai letto la documentazione, evidentemente non hai afferrato il significato della spiegazione.

Cerco di chiarire ancora meglio.

Partiamo dalla struttura HTML:

<div id="newsletter" class="dialog">
  <div class="buttons">
    <a href="http://forum.mrwebmaster.it/jquery/..." class="ok">Si, registrami</a>
    <a href="#" class="cancel">No,grazie</a>
  </div>
</div>

Questo selettore:

$('#newsletter','a[href=#]')

equivale a scrivere:

$("a[href=#] #newsletter")

Ovvero, verrebbe cercato l'elemento "#newsletter" che deve essere discendente di "a[href=#]". Il che non ha molto senso, perché dovrebbe comunque essere l'esatto contrario.

Infatti il secondo parametro (che hai specificato) indicherebbe il contesto, cioè il livello di partenza da cui iniziare la ricerca. In altre parole stai specificando che "a[href=#]" deve essere l'elemento contenitore da cui partire.

La documentazione riporta questo:

By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function.

Immagino che tu volessi invece selezionare l'elemento "a[href=#]" che però sta dentro "#newsletter". Ma in tal caso puoi semplicemente scrivere:

$('#newsletter a[href=#]')

Ma se volevi essere più selettivo potevi, più che altro, indicare la classe di quell'elemento. Che si traduce in questo modo:

$('#newsletter .cancel')

Tieni presente che i selettori visti qui funzionano allo stesso modo per i CSS.

...E di questo che mi dici?:

$('#newsletter', '.buttons', 'a[href=#]')

Già era superflua l'indicazione del secondo parametro, ma dove hai letto che puoi specificarne anche un terzo?

Presumo che intendessi utilizzare una cosa del genere:

$('#newsletter .buttons a[href=#]')

Per il resto

Da principiante ho pensato mentalmente questa cosa :
Dopo tot tempo di apertura della pagina (es. 8 secondi) visualizzo il pop-up per l'iscrizione della newsletter, se l'utente clicca "sì" lo rimando all'iscrizione, se clicca "no" non faccio più visualizzare il pop-up (interrompo il timer o la visualizzazione del pop-up?).

Aspetta, non riesco più a seguire il tuo discorso; per pop-up intendi sempre la finestra di dialogo con dentro i pulsanti "ok" e "cancel"??? Oppure sono cose diverse?

Nel caso tu stia parlando della stessa finestra di dialogo, se quel timer serve ad aprirla, significa che nel momento in cui clicchi su quei pulsanti, la finestra stessa è già aperta e il timer è già bello che finito; non avrebbe senso cancellarlo.

Chiaramente il preventDefault inibisce il ricaricamento della pagina e, cliccando su "cancel", il timer non ripartirebbe comunque.

 

[Marco_88]

Ciao WmbertSea e scusami per la risposta in ritardo. Questo effettivamente mi era sfuggito

By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function.

Se non ho capito male mettendo due parametri separati dalla virgola e dagli apici come ho fatto io con

$('#newsletter','a[href=#]')

equivale ad invertire la ricerca dell'elemento, varrebbe a dire "cerca il div #newsletter IN a href"?

Per quanto riguarda questo

$('#newsletter', '.buttons', 'a[href=#]')

in realtà la mia intenzione era proprio questa

$('#newsletter .buttons a[href=#]')

Comunque si parlo sempre della finestra di dialogo, sul fatto del timer credo di aver capito quello che dici. E' che sto cercando un modo, una volta cliccato il pulsante .cancel (a href=#), di non farlo aprire più.