阻止鼠标连点多次触发事件(请求)

[naseeihity]

场景：这一问题在单页面中大量存在，点击按钮触发异步事件，在回调函数中更新界面。这时候，如果快速连点鼠标，就会多次触发该异步事件(请求)，这就会出现几个问题：

1. 请求返回的顺序不能保证
2. 触发多次界面渲染，且可能导致渲染异常
3. 会产生许多冗余的请求

---

解决思路：

1. 加锁。通过变量锁，或者UI上禁用掉相关按钮来实现。在请求完成后（成功或失败或返回异常）解锁。其问题在于需要增加额外的控制变量或者UI变化，且需要保证正确注册解锁事件(即complete)，否则会导致功能不可用。

2. 主动控制请求。

知乎上的这个回答很清晰地说明了这个问题。

取消不必要的请求

$(document).ready(
    var xhr;

    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

实际业务中，这一方案需要一个全局的控制，通过一个全局变量来挂载不同的请求XHR对象。

防抖节流

Debounce、Throttle可以控制一个函数在一定时间内的执行次数，可以间接控制DOM事件的触发频率，提高页面性能。

应用场景

Debounce: 调整窗口大小,自动补全功能
Throttle：滚动屏幕时不断检查距离底部的距离

_.debounce(func, [wait=0], [options={}])
//将多个调用合并成一次
//options.leading为true时，多次调用会在首次调用时触发

_.throttle(func, [wait=0], [options={}])
//事件会在一定时间内至少执行一次

// 错误
$(window).on('scroll', function() {
   _.debounce(doSomething, 300); 
});
// 正确
$(window).on('scroll', _.debounce(doSomething, 200));

$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
	var data = options.data;
	var urlarr = options.url.split('/');
	var key = urlarr[urlarr.length - 1];
	// 判断是否需要阻止重复请求
	var abortOnRetry = true;
	if (originalOptions.data && originalOptions.data.abortOnRetry !== undefined) {
		abortOnRetry = false;
	}
	// 当请求不在缓存中时，则请求，否则终止
	if (abortOnRetry) {
		if (!requestXhr[key] || !requestXhr[key].data || requestXhr[key].data !== data) {
			requestXhr[key] = {
				xhr: jqXHR,
				data: data
			};
		} else {
			jqXHR.abort();
		}
	}

	var complete = options.complete;
	options.complete = function (jqXHR, textStatus) {
		//请求完成后，清除缓存请求的地址
		requestXhr[key] = null;

		if ($.isFunction(complete)) {
			complete.apply(this, arguments);
		}
	};
	
});

jquery的abort方法似乎不会从控制栏中看到（显示连接中断）。
最好预留参数处理那些不需要abort重复请求的请求。