jQuery延时加载AJAX事件

[children0410]

现在想要实现鼠标移动到图片上时，触发AJAX事件，调用另外一个页面。代码如下：
$('.mainbox').hover(function() {
$.ajax({
type: "GET",
url: "AjaxUserInfoModify.aspx",
dataType: "html",
data: "userName=" + $(this).html(),
beforeSend: function(XMLHttpRequest) {
$("#float").text("正在查询...");
//Pause(this,100000);
},
success: function(msg) {
$("#float").html(msg);
$("#float").css("color", "red");
},
complete: function(XMLHttpRequest, textStatus) {
//隐藏正在查询图片
},
error: function() {
//错误处理
}
});
功能基本实现
但现在一个问题，比如说，我有一个叫做1、2、3的图片，我鼠标依次很快经过这三张图片，最后停留在3上面，但我等待程序读取数据库时发现，程序是将1、2、3依次读取的，其实我只要3的详细信息，这样很浪费数据库资源

我想请问，如何才能实现，很快经过的图片的信息我不读取，当我在这图片上停留2秒的时候，我才开始异步调用数据库？

[sohighthesky]

var t=0;
$('.mainbox').hover(function() { 
    clearTimeot(t);
    t=setTimeout(function() {
       $.ajax({ 
            type: "GET", 
            url: "AjaxUserInfoModify.aspx", 
            dataType: "html", 
            data: "userName=" + $(this).html(), 
            beforeSend: function(XMLHttpRequest) { 
                $("#float").text("正在查询..."); 
                //Pause(this,100000); 
            }, 
            success: function(msg) { 
                $("#float").html(msg); 
                $("#float").css("color", "red"); 
            }, 
            complete: function(XMLHttpRequest, textStatus) { 
                //隐藏正在查询图片 
            }, 
            error: function() { 
                //错误处理 
            } 
        }); 
    },100);//这个时间可适当的改下
}

[sohighthesky]

clearTimeout(t);//打掉了一个字母

[children0410]

好像不行，完全不加载AJAX事件了

[夺命胖子]

setTimeOut延时一段时间后
判断鼠标位置所在对象,是否为hover事件当前this

[children0410]

[Quote=引用 4 楼 pengyi_205 的回复:]
setTimeOut延时一段时间后
判断鼠标位置所在对象,是否为hover事件当前this
[/Quote]
具体应该怎么实现呢，请教了~~

[ljsheng]

setTimeout()

[夺命胖子]

  $(document).ready(function() {
            $(".mainbox").hover(function() {
                t = setTimeout(function() {
                    //这里写你的AJAX请求
                }, 3000);
            },
               function() {
                   clearTimeout(t);
               });
        });

昨天我把问题想复杂了

上面的代码就行了

[children0410]

非常感谢pengyi_205的帮助~~

已经实现延时效果了

但出现了一个新的问题，比如说，我设定延时3秒，在3秒与从服务器返回这段时间，我将鼠标移动到下一个对象时，显示出来的效果就会是，先显示前一个结果，然后再显示这个结果。

感觉就像是被程序记录下了所有的对象，然后一个个轮流返回值，这是jQuery的$.ajax的特殊功能呢，还是都是这样的啊？

有没有方法可能在这次只请求一次，当开始请求时，注销之前所有请求呢？

[children0410]

$(document).ready(function() {
$('.mainbox').hover(function() {
t = setTimeout(function() {
$.ajax({
type: "GET",
url: "AjaxUserInfoModify.aspx",
dataType: "html",
data: "userName=" + $(this).html(),
beforeSend: function(XMLHttpRequest) {
$("#float").text("正在查询...");
//Pause(this,100000);
},
success: function(msg) {
$("#float").html(msg);
$("#float").css("color", "red");
},
complete: function(XMLHttpRequest, textStatus) {
//隐藏正在查询图片
},
error: function() {
//错误处理
}
});
$(this).mousemove(function(event) {
$('#float').show();
});
}, 300);
}, function() {
clearTimeout(t);
$('#float').hide();
});
});

我都写成这样了，还是出现错误：'this.0.innerHTML'为空或不是对象

[夺命胖子]

data: "userName=" + $(this).html(),

原因可能就在这一句，此时$(this) 并不是你hover的对象

在这下面加上一句
$('.mainbox').hover(function() {
var thisObj=$(this);//把this保存起来, 后面用引用thisObj

[SK_Aqi]

不过感觉应该有设置时间这项的，你看1楼的那样不行么？
或者设置setTimeout()可以

[xuyiazl]

$.extend({
    manageAjax: function(o) {
        ///	<summary>
        /// ajax异步请求管理类
        ///	manageType：指定ajax队列的行为
        /// 1.'normal'：默认。
        /// 2.'sync'：同时。
        /// 3.'queue'：让ajax以队列的形式,设置了queue就要设置maxReg的值。
        /// 4.'abortOld'：新的request请求建立是，停止旧的ajax请求，这个跟maxReg的参数有联系。
        /// maxReq：限制队列中最多的请求个数，如果manageType的值不是queue,以前的ajax请求将停止，默认值为0,就是不限制。
        /// blockSameRequest：防止相同的请求，true，不允许相同的请求，false,允许相同的请求，默认值是false。           
        ///	</summary>
        o = $.extend({
            manageType: 'normal',
            maxReq: 0,
            blockSameRequest: false,
            global: true
        }, o);
        return new $.ajaxManager(o);
    },
    ajaxManager: function(o) {
        this.opt = o;
        this.queue = [];
    }
});

$.extend($.ajaxManager.prototype, {
    add: function(o) {
        var quLen = this.queue.length, s = this.opt, q = this.queue, self = this, i, j;
        var cD = (o.data && typeof o.data != "string") ? $.param(o.data) : o.data;
        if (s.blockSameRequest) {
            var toPrevent = false;
            for (i = 0; i < quLen; i++) {
                if (q[i] && q[i].data === cD && q[i].url === o.url && q[i].type === o.type) {
                    toPrevent = true;
                    break;
                }
            }
            if (toPrevent) {
                return false;
            }
        }
        q[quLen] = {
            fnError: o.error,
            fnSuccess: o.success,
            fnComplete: o.complete,
            fnAbort: o.abort,
            error: [],
            success: [],
            complete: [],
            done: false,
            queued: false,
            data: cD,
            url: o.url,
            type: o.type,
            xhr: null
        };

        o.error = function() {
            if (q[quLen]) {
                q[quLen].error = arguments;
            }
        };
        o.success = function() {
            if (q[quLen]) {
                q[quLen].success = arguments;
            }
        };
        o.abort = function() {
            if (q[quLen]) {
                q[quLen].abort = arguments;
            }
        };
        function startCallbacks(num) {
            if (q[num].fnError) {
                q[num].fnError.apply($, q[num].error);
            }
            if (q[num].fnSuccess) {
                q[num].fnSuccess.apply($, q[num].success);
            }
            if (q[num].fnComplete) {
                q[num].fnComplete.apply($, q[num].complete);
            }
            self.abort(num, true);
        }

        o.complete = function() {
            if (!q[quLen]) {
                return;
            }
            q[quLen].complete = arguments;
            q[quLen].done = true;
            switch (s.manageType) {
                case 'sync':
                    if (quLen === 0 || !q[quLen - 1]) {
                        var curQLen = q.length;
                        for (i = quLen; i < curQLen; i++) {
                            if (q[i]) {
                                if (q[i].done) {
                                    startCallbacks(i);
                                }
                                else {
                                    break;
                                }
                            }

                        }
                    }
                    break;
                case 'queue':
                    if (quLen === 0 || !q[quLen - 1]) {
                        var curQLen = q.length;
                        for (i = 0, j = 0; i < curQLen; i++) {
                            if (q[i] && q[i].queued) {
                                q[i].xhr = jQuery.ajax(q[i].xhr);
                                q[i].queued = false;
                                break;
                            }
                        }
                    }
                    startCallbacks(quLen);
                    break;
                case 'abortOld':
                    startCallbacks(quLen);
                    for (i = quLen; i >= 0; i--) {
                        if (q[i]) {
                            self.abort(i);
                        }
                    }
                    break;
                default:
                    startCallbacks(quLen);
                    break;
            }
        };

        if (s.maxReq) {
            if (s.manageType != 'queue') {
                for (i = quLen, j = 0; i >= 0; i--) {
                    if (j >= s.maxReq) {
                        this.abort(i);
                    }
                    if (q[i]) {
                        j++;
                    }
                }
            }
            else {
                for (i = 0, j = 0; i <= quLen && !q[quLen].queued; i++) {
                    if (q[i] && !q[i].queued)
                        j++;
                    if (j > s.maxReq)
                        q[quLen].queued = true;
                }
            }
        }
        q[quLen].xhr = (q[quLen].queued) ? o : jQuery.ajax(o);
        return quLen;
    },
    cleanUp: function() {
        this.queue = [];
    },
    abort: function(num, completed) {
        var qLen = this.queue.length, s = this.opt, q = this.queue, self = this, i;
        function del(num) {
            if (!q[num]) {
                return;
            }
            (!completed && q[num].fnAbort) && q[num].fnAbort.apply($, [num]);
            if (!q[num]) {
                return;
            }
            if (q[num].xhr) {
                if (typeof q[num].xhr.abort != 'undefined') {
                    q[num].xhr.abort();
                }
                if (typeof q[num].xhr.close != 'undefined') {
                    q[num].xhr.close();
                }
                q[num].xhr = null;
            }
            if (s.global && $.active && ! --$.active) {
                $.event.trigger("ajaxStop");
            }
            q[num] = null;
        }
        if (!num && num !== 0) {
            for (i = 0; i < qLen; i++) {
                del(i);
            }
            this.cleanUp();
        }
        else {
            del(num);
            var allowCleaning = true;
            for (i = qLen; i >= 0; i--) {
                if (q[i]) {
                    allowCleaning = false;
                    break;
                }
            }
            if (allowCleaning) {
                this.cleanUp();
            }
        }
    }
});

[xuyiazl]

//ajax管理--每次只请求一次，当开始请求时，注销之前所有请求
//这里只用于用户点击查看操作 --防止网络延迟而造成的覆盖当前查看的内容
//不影响自动加载列表
var x = $.manageAjax({ manageType: 'abortOld', maxReq: 1 });
x.add({ url: newsHandler.Url + params,
            success: function(relust) {
                eval(relust);
                if (newsData.title.ascIItoUnicode() == '数据获取失败') {
                    news_detail.empty().append(
                            '<h2>{0}</h2>'.format(newsData.title.ascIItoUnicode())
                        );
                } else {
                    news_detail.empty().append(
                        '<h2>{0}</h2><em>{1}</em><p rel="context">{2}</p>'.format(newsData.title.ascIItoUnicode(),
                            newsData.publishdate.ascIItoUnicode(),
                            newsData.content.ascIItoUnicode()
                        )
                    );
                }
                //绑定双指缩放算法操作事件
                newsHandler.gesture(news_detail);
            }
        });

[夺命胖子]

按照javascript 解释执行来说，1楼的t变量，，很可能未定义