Javascript 如果用户同时执行单击列表，则将多个请求限制到服务器

我需要帮助。我试图跟踪用户的点击。这个场景是，我有一个列表，用户可以在这个列表上执行点击，点击一个调用服务器来获取数据。但我陷入了这种情况，若用户同时点击列表，多个请求就会到达服务器

我想要的是只会发生点击调用，并向服务器请求数据

这就是我到现在为止所做的

function getData(id) {
        _this.lastClickId = _this.currentId;
        dataFactory.getListOfData(id).then(function(response) {
            if(_.isEqual(_this.lastClickId , id)){
                appendData(response);
            } else {
                getData(executionId);
            }
        });
        _this.currentId = id;
    }

以下是我的html代码：

<ul>
 <li ng-click="getData(1)">option1</li>
 <li ng-click="getData(2)">option2</li>
</ul>

选项1
选项2

也许这个解决方案适合您

您需要计算出每秒允许多少次单击。我们就说两个吧

var clickLimit = 2;

您还需要跟踪点击量

var clickCount = 0;

每次用户单击时，您必须将1添加到

clickCount

现在，您可以设置每秒一次的间隔，以从

clickCount

中删除单击

var clickInterval = setInterval(function () {

    if (clickCount != 0) { clickCount -= 1; }

}, 1000);

然后将代码放入

if

语句中，该语句根据

clickLimit

检查

clickCount

if (clickCount <= clickLimit)
{
    // action
}

---

if（clickCount也许这个解决方案适合您

你需要计算出每秒允许多少次点击。让我们说两次就知道了

var clickLimit = 2;

您还需要跟踪点击量

var clickCount = 0;

每次用户单击时，您必须将1添加到
clickCount

现在，您可以设置每秒一次的间隔，以从
clickCount
中删除单击

var clickInterval = setInterval(function () {

    if (clickCount != 0) { clickCount -= 1; }

}, 1000);

然后将代码放入
if
语句中，该语句根据
clickLimit
检查
clickCount

if (clickCount <= clickLimit)
{
    // action
}

if（clickCount）限制对输入元素的多次单击
一种技术是在请求进行时使用指令禁用submit按钮

 <button ng-click="getData(id)" ng-disabled="inProgress">
   Submit
 </button>

通过禁用“提交”按钮，在请求进行过程中会忽略多次单击

 <button ng-click="getData(id)" ng-disabled="inProgress">
   Submit
 </button>


限制对输入以外的元素的多次单击
对于输入以外的元素，禁用状态可通过指令显示，并在禁用时忽略单击：

<div ng-click="handleClick(id)" ng-style="inProgress?{opacity:'0.4'}:''">
   Get {{id}}
</div>

在请求进行过程中，将忽略多次单击，元素将灰显。
限制对输入元素的多次单击
一种技术是在请求进行时使用指令禁用submit按钮

 <button ng-click="getData(id)" ng-disabled="inProgress">
   Submit
 </button>

通过禁用“提交”按钮，在请求进行过程中会忽略多次单击

 <button ng-click="getData(id)" ng-disabled="inProgress">
   Submit
 </button>


限制对输入以外的元素的多次单击
对于输入以外的元素，禁用状态可通过指令显示，并在禁用时忽略单击：

<div ng-click="handleClick(id)" ng-style="inProgress?{opacity:'0.4'}:''">
   Get {{id}}
</div>

当请求正在进行时，多次单击将被忽略，元素将变灰。
请查看
debounce
技术。这可能会有帮助。另一种技术是在请求正在进行时使用指令禁用提交按钮。Thanx georgeawg，但我无法禁用我的列表。它的用户选项用于选择t、 如果您需要特定于您的需求的答案，则需要显示用户输入如何连接到执行HTTP请求的函数。请显示包含单击处理程序的HTML。请查看
debounce
技术。这可能会有所帮助。另一种技术是在请求处于p时使用指令禁用提交按钮rogress.Thanx GeorgeWG，但我无法禁用我的列表。它的用户选项可供选择。如果您想要特定于您的需求的答案，您需要显示用户输入如何连接到执行HTTP请求的函数。请显示具有单击处理程序的HTML。感谢您的回复，但我没有任何提交按钮，我有一个关于用户可以的列表执行单击。如果您没有提交按钮，需要禁止的单击处理程序是什么类型的元素？谢谢您的回复，但我没有任何提交按钮，我有一个关于用户可以执行单击的列表。如果您没有提交按钮，需要禁止的单击处理程序是什么类型的元素？我建议您更改
clickCount！=0
变为
clickCount>0
。如果出于某种奇怪的原因，您最终的
clickCount
低于0，您可以发送任意数量的请求。我建议您将
clickCount！=0
变为
clickCount>0
。如果出于某种奇怪的原因，您最终的
clickCount
是b在0下面，您可以发送任意数量的请求。