Javascript: comment arrêter la file d'attente des événements click?

Question

Le code suivant fonctionne correctement le seul problème est que l'événement click est mis en file d'attente comme par exemple le setTimeout est appelé pour chaque clic et le popup apparaît plusieurs fois. Comment faire le pop-up apparaissent uniquement lorsque l'utilisateur clique et pour assurer l'écart entre chaque pop-up est permet de dire 4 secondes

var showpopup = 1; 
var check = true; 
var seconds = 4000;    // change the frequency here current frequency = 2 seconds 
var url = "https://www.fb.com"; // change the url here 
var strWindowFeatures = "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=" +screen.width 
         + ",height=" +screen.height; 
function popup (event) 
{ 
    event.stopPropagation(); 
    if (showpopup === 1) 
    { 
      //if 
(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Windows 
Phone|Opera Mini|IEMobile/i)) 
      //{ 
       if (check == true) 
       { 
         window.open(url , '_blank' , strWindowFeatures); 
         showpopup++; 
         check = false; 
       } 
      //} 
    } 
    else 
    { 
     setTimeout(checkValue, seconds); 
    } 
} 

function checkValue() 
{ 
    showpopup = 1; 
    check = true; 
} 

window.onclick = popup(event); 

Answer 1

Ceci est appelé fonction étranglant:

function throttle(func){ 
    var timeout=null; 
    return function(...args){ 
    if(!timeout) func(...args), timeout=setTimeout(_=>timeout=null,4000);//if were not waiting, execute the function and start waiting 
    } 
} 

Vous pouvez donc faire

var alert=throttle(window.alert); 

alert("Wohoo!"); 
alert("Never executed!"); 

Dans votre cas, il serait:

window.onclick = throttle(popup); 

---

Ma syntaxe est peut-être un peu compliqué (ES6), permet donc d'expliquer un peu:

return function(...args){ 

retour une nouvelle fonction qui stocke tous les arguments dans le tableau args (Afin que nous puissions passer à notre fonction intérieure)

if(!timeout) 

Si aucun délai d'attente theres

func(...args), 

appel de la fonction, en passant notre tableau args comme paramètres (appelé opérateur propagation)

timeout=setTimeout(...,4000) 

défini notre délai d'exécution après 4000 pour exécuter les éléments suivants:

_=>timeout=null 

Lorsque les finitions de délai d'attente, réinitialiser le timeout et attendez l'appel de la fonction suivante ...

Answer 2

Lodash a une fonction throttle pour cela.

_.throttle(func, [wait=0], [options={}]) 

Answer 3

Le code suivant permet de résoudre le problème sans utiliser l'accélérateur

// JavaScript document

var showpopup = 1; 
var check = true; 
var seconds = 4000;    // change the frequency here current frequency = 2 seconds 
var url = "https://www.fb.com"; // change the url here 
var strWindowFeatures = "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=" +screen.width + ",height=" +screen.height; 

function popup() 
{ 
    if (check === false) 
    { 
     return; 
    } 
    else if (showpopup === 1) 
    { 
     if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Windows Phone|Opera Mini|IEMobile/i)) 
     { 
       if (check == true) 
       { 
        window.open(url , '_blank' , strWindowFeatures); 
        showpopup++; 
        check = false; 
        setTimeout(checkValue , seconds); 
       } 
     } 
    } 
} 

function checkValue() 
{ 
    showpopup = 1; 
    check = true; 
} 

window.onclick = popup;