2017-05-31 9 views
0

Der folgende Code funktioniert gut das einzige Problem ist, dass das click -Ereignis in die Warteschlange eingereiht wird, wie zum Beispiel die setTimeout wird für jeden Klick aufgerufen und das Popup erscheint mehrmals. Wie das Popup nur, wenn Benutzer klickt erscheinen zu lassen und diese Lücke zwischen den einzelnen Popup, um sicherzustellen, können sagen, 4 SekundenJavascript: Wie man die Klickereigniswarteschlange stoppt?

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); 
+0

ich, dass 'window.onclick = Popup (event) gedacht hätte,' nicht gesetzt der Click-Handler, weil Sie den Rückgabewert von (Aufruf von Popup mit einem leeren Ereignisparameter) setzen, um Klicks zu behandeln, anstatt die Funktion selbst zu setzen, wie in 'window.onclick = popup;' – James

+0

Entschuldigung, das ist mein Fehler, der den alten gepostet hat Version überprüft nicht – Alien128

Antwort

3

Diese Funktion aufgerufen wird Drosselung:

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 
    } 
} 

So können Sie

tun
var alert=throttle(window.alert); 

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

In Ihrem Fall wäre es:

window.onclick = throttle(popup); 

Meine Syntax ist vielleicht ein wenig kompliziert (ES6), lässt es so erklären, ein wenig:

return function(...args){ 

Rückkehr eine neue Funktion, die alle Argumente in der args Array speichert (So, dass wir weitergeben können es zu unserer inneren Funktion)

if(!timeout) 

Wenn theres kein Timeout

func(...args), 

Aufruf der Funktion, unsere args Array als Parameter (so genannte Spread-Operator)

timeout=setTimeout(...,4000) 

schlagen unsere Timeout nach 4000 auszuführen auszuführen, um die folgenden Passieren:

_=>timeout=null 

Wenn die Zeitüberschreitung beendet, Zurücksetzen der Timeout und warte auf den nächsten Funktionsaufruf ...

+0

Danke @ Jonas-w für die Hilfe funktioniert wie ein Charme – Alien128

+0

gibt es eine Möglichkeit, die Klickereignisse zu stoppen, ohne diese Drosselfunktion – Alien128

+0

@ Alien128 ja shure. Sie können das dort verwendete Prinzip anwenden, wie Sie wollen. Allerdings ist Ihr Code wirklich lesbar –

0

Lodash hat dafür eine throttle Funktion.

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

[Wait = 0] ist wahrscheinlich schlechte Syntax, und ein ganzes Framework für nur eine Funktion einzubetten ist nicht wirklich notwendig –

+0

@ Jonasw [warten = 0] zeigt, dass der Standardwert ist 0. Lodash hat viele Funktionen, die die Dinge einfacher macht, so ist es eine Wahl ... – hackio

+0

@hackio können Sie erarbeiten – Alien128

0

Der folgende Code löst das Problem ohne Drosselklappe mit

// JavaScript Dokument

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; 
Verwandte Themen