Javascript：如何停止点击事件排队？答案

【问题标题】：Javascript: how to stop the click event queuing?Javascript：如何停止点击事件排队？
【发布时间】：2017-05-31 16:17:11
【问题描述】：

以下代码工作正常，唯一的问题是点击事件排队，例如每次点击都会调用setTimeout，并且弹出窗口会出现多次。如何使弹出窗口仅在用户单击时出现，并确保每个弹出窗口之间的间隔为 4 秒

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

【问题讨论】：

我原以为window.onclick = popup(event); 没有设置点击处理程序，因为您正在设置（使用空事件参数调用弹出窗口）的返回值来处理点击，而不是设置函数本身，如window.onclick = popup;
对不起，我的错误发布了旧版本没有检查

标签： javascript dom-events mouseevent

【解决方案1】：

这称为函数节流：

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

所以你可以这样做

var alert=throttle(window.alert);

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

在你的情况下是：

window.onclick = throttle(popup);

我的语法可能有点复杂（ES6），所以让我们解释一下：

return function(...args){

返回一个新函数，将所有参数存储在 args 数组中（这样我们就可以将它传递给我们的内部函数）

    if(!timeout)

如果没有超时

func(...args),

调用函数，将我们的 args 数组作为参数传递（称为扩展运算符）

timeout=setTimeout(...,4000)

将我们的超时设置为在 4000 之后执行以执行以下操作：

_=>timeout=null

当超时结束时，重置超时并等待下一次函数调用...

【讨论】：

有什么办法可以在不使用这个节流功能的情况下停止点击事件排队
@Alien128 是的，舒尔。您可以根据需要应用那里使用的原理。但是，通过这个，你的代码是真正可读的

【解决方案2】：

Lodash 对此有一个 throttle 函数。

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

【讨论】：

[wait=0] 可能是错误的语法，并且为一个函数嵌入整个框架并不是真正必要的
@Jonasw [wait=0] 显示默认值为 0。Lodash 有很多功能让事情变得更简单，所以它是一个选择...
@hackio 你能详细说明一下吗

【解决方案3】：

以下代码在不使用节流阀的情况下解决了问题

// JavaScript 文档

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;

【讨论】：