Javascript函数没有为不耐烦的用户正常执行

Question

首先，我很遗憾在我的问题中如此通用......我不知道如何通过上传大量代码来详细询问这个问题。

问题：

我们做了很多懒惰的JavaScript加载。

正常使用案例：

1. 用户访问网站。
2. 用户点击按钮。
3. 按钮调用服务器以关闭包含更多JavaScript（JavaScript文件+某些内联JavaScript代码）的图层
调用
4. 回调，以便将JavaScript放入DOM并执行。图层弹出窗口打开，其中包含内容。

上面的用例：不耐烦的愤怒用户grrrr

1. 用户访问网站。
2. 用户反复点击按钮。
   • 初始加载时的JavaScript尚未完全处理...
   • 某些功能会产生错误......
     • null为null
     • 功能未定义
     • XYZ为空
     • 无法调用方法'get'为null（YUI 3.3使用get）
3. 生成分页符或错误并将其发送到服务器。

上面的用例：半不耐烦的用户

1. 用户访问网站。
2. 初始加载时的JavaScript已完全处理
3. 用户一次又一次点击按钮。
4. 按钮调用服务器以关闭包含更多JavaScript（JavaScript文件+某些内联JavaScript代码）的图层
调用
5. 回调，以便将JavaScript放入DOM并执行。
   • 由于某种原因，JavaScript正在加载和中断...
   • 某些功能会产生错误......
     • null为null
     • 功能未定义
     • XYZ为空
     • 无法调用方法'get'为null（YUI 3.3使用get）
6. 生成分页符或错误并将其发送到服务器。

所以问题来了，我怎么能阻止网站为不耐烦的用户打破...我一直在避免尝试/捕获，但我应该吗？

我正在使用YUI 3.3，如果有帮助，则使用调度程序插件

Answer 1

只处理一次点击，你可以用这样的方式标记按钮，以便后续调用click处理程序可以确定加载已经开始，和/或跟踪XMLHttpRequest对象触发查询并在其上调用abort，然后触发新查询。

要限制点击处理，有许多解决方案。不知道你的javascript的形式，我估计使用元素存储的最容易实现的方法：

function clickHandler(element) {
 // make sure this is not already loading
 if (element.retrieve('_waiting_to_load') === true)
   return;
 element.store('_waiting_to_load', true);

 /* do ajax calls */
}

function ajaxCallback(response) {

  /* do whatever needs to be done with the response */

  // set _waiting_to_load to false
  element.store('_waiting_to_load', false);
}

中止/重启负载：

function clickHandler(element) {

 // if the loading is pending, start it over
 if (element.retrieve('_pending_query')) {
   element.retrieve('_pending_query').abort();
 }

 // don't know what you're using for this... substitute the real thing
 var query = new ajaxQueryObject;
 element.store('_pending_query', query );

}

function ajaxCallback(response) {

  /* do whatever needs to be done with the response */

  element.store('_pending_query', false);
}