取消延迟的活动

时间:2016-01-27 20:58:35

标签: javascript jquery

免责声明:我不是非常精通Javascript,而且我的.net程序中有这个小型JS代码。

我有2个下拉列表,ReportList和YearList。第一个选定值使用AJAX动态填充第二个下拉列表。问题是,每次选择ReportList时,它都会对数据库进行查询。 ReportList中至少有200个条目,当用户在下拉列表中使用鼠标滚轮时,应用程序会在很短的时间内完成数百次查询并导致数据库崩溃。到目前为止我有这个

             $('#ReportList').change(function () {
             setTimeout(function () { PopulateYearsDropdownList() }, 2000);
         });

我玩过stopPropagation()并且它没有用。我无法非常有效地测试它,因为即使测试数据库也由其他人托管和维护。

我希望能够滚动浏览而不会提示与已经完成的报告数量一样多的查询。我想添加一个小延迟,每个功能" .change"取消最后一次函数调用。

我认为从一开始就没有考虑到这一点,但我想在很短的时间内解决这个问题。

3 个答案:

答案 0 :(得分:4)

我建议将setTimeout分配给变量(具有适当的范围可访问性)并使用clearTimeout来停止超时。

详细了解setTimeoutclearTimeout

示例如下:

var myTimeout;
$('#ReportList').change(function () {
    if (myTimeout) clearTimeout(myTimeout);
    myTimeout = setTimeout(function () { PopulateYearsDropdownList() }, 2000);
});

答案 1 :(得分:0)

您应该将响应保存到内存中或使用$.ajax的缓存功能。后者需要您的服务器使用适当的缓存标头发送响应

答案 2 :(得分:0)

不是100%确定你要做什么,但你可以将超时设置为变量,然后在另一个时间点清除超时。

var myTimeout = setTimeout(PopulateYearsDropdownList(), 2000);

//...some more code

clearTimeout(myTimeout); //cancels the original setTimeout

您还可以使用.abort()取消您的AJAX请求https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts