扩展$.post方法，增加浏览器端缓存功能

 

最近在做的一个东西，里面有需求需要在mouseover时间后，向服务端发送一次ajax请求。但最后发现某些浏览器，当鼠标即使停留在dom元素边上某个位置时，竟然连续不断的触发mouseover这个事件，于是干脆对ajax请求做了cache，在一定时间内的同一个url的相同参数的请求，使用以前缓存下来的数据，而不影响服务端。

 

扩展jQuery的$.post，实现ajax请求缓存的ajaxHelper的代码：

var ajaxHelper = function(){
    
    var _postCache = {};
    var _postQueue = {};
    
    return {
        post : function( url, data, callback, type, o ){
            o = $.extend({
                life : 1 // default is 1 second
            }, o);
            if ( $.isFunction( data ) ) {
                type = callback;// fix the bug in $.post
                callback = data;
                data = {};
            }
            var key = '{0},{1},{2}'.format(url, type, $.param(data));
            var now = +new Date;
            var item = _postCache[key];
            // the Javascript Date.getTime() return as millisecond.
            if( item && now-item.birthday<o.life*1000 )
            {
//					console.log('read from cache');
                callback(item.data);
            }
            else
            {
//					console.log('miss cache')
                if( _postQueue[key] && _postQueue[key].length>0 ){
                    _postQueue[key].push(callback);
                }
                else
                {
                    _postQueue[key] = [callback];
                    $.post(url, data, function(data){
                        _postCache[key] = {birthday:now, data:data};
                        var queue = _postQueue[key], f;
                        while( f=queue.shift() )
                            f(data);
                    }, type);
                }
            }
        }
    };
}();

 

测试代码：

$(function(){
        $('#test').click(function(){
			function test(i){
                ajaxHelper.post('json.php', function(data){
                    console.log('The {0} times, and name is {1}'.format(i, data.name));
                }, 'json');
                
            }
            for(var i=0;i<3;i++)
                test(i);
		});    
    
    })

HTML页面内容：

<div>
    
        <input id="test" type="button" value="测试" />
    </div>

 

测试结果：

 

POST http://approach.local/json.php
The 0 times, and name is Superman
The 1 times, and name is Superman
The 2 times, and name is Superman

 

可以看到，虽然调用了3次方法，但实际上只发出了一次请求（默认缓存时间是1s内）。

 

 

 

 

onmouseover 事件有时候的确比较讨厌，会多次触发，好像是 position:relative/absolute 的对象容易出现，没仔细研究过

不过我觉得既然问题是由于 onmouseover 事件多次触发引起的，那就应该在 onmouseover 事件中解决这个问题，而不应该在发起请求的时候处理。当然，你要是想在其他地方也使用你的 “ajaxHelper” 的缓存功能这样做还是有必要的

mouseenter 吧

onmouseover 多次触发是由于标签onmouseover后进行了偏移设置,如果鼠标正好处在边界处,就会在偏移的时候失去焦点,触发onmouseout,然后,标签又偏移回去,就这样反复的
onmouseover onmouseout onmouseover .......
确实烦人.
取消onmouseover标签进行偏移是一个简单的方法
不过话说会来,
cache确实是有必要加的.

因为触发mouseover的元素可能是动态的添加的，所以我是在它的父类元素上监听，不能用jQuery提供的mouseenter等。
mouseover表现的比较怪异，有时候甚至不触发，后来都没找到好的处理方法，另外，这个AJAX请求是一个比较重的查询，现在的做法也减少的频繁发起请求。

触发 onmouseover 事件时，执行 unbind('mouseover')，删除绑定。触发 onmouseout 事件时，再对 onmouseover 事件进行绑定。