HTML:

<div id='allType'>
<div class='allTypeHead'><span>所有分类</span></div>
<ul class='allType'>
<li style="background:url('__PUBLIC__/img/建筑师的非建筑.png') no-repeat 0 13px;position:relative;"><a href="<{:U('Pro/more',array('type'=>1))}>">&nbsp;设计小物</a></li>
<li style="background:url('__PUBLIC__/img/虚拟物件.png') no-repeat 0 11px;position:relative;"><a href="<{:U('Pro/more',array('type'=>2))}>">&nbsp;虚拟物件</a></li>
<li style="background:url('__PUBLIC__/img/材料推荐.png') no-repeat 3px 12px;position:relative;"><a href="<{:U('Pro/more',array('type'=>3))}>">&nbsp;材料推荐</a></li>
</ul>
</div>

Javascript:

// 声明全局变量addUl,如果声明在函数内部,则鼠标划入划出时都是创建的新变量,导致无法清除划入时的定时器
var addUl;
$(function() {
// 动态绑定不能绑定hover,只能用mouseenter mouseleave替代
$('#allType').on('mouseenter mouseleave', 'li', function(e) {
var t = $(this);
if (e.type == 'mouseenter') {
var a = $(this).find('a');
var width = $(this).width();
var href = a.attr('href');
var arr = href.split('/');
var id = arr[arr.length - 1];
arr = id.split('.');
id = arr[0];
// 由于jquery的BUG导致鼠标滑动过快的时候会有二级分类不会移除的情况,而这里使用的又不是动画,所以不能使用stop()。因此只能通过设置延迟执行AJAX来完成下级分类的添加
// 由于setTimeout()的延迟执行特效,所以在执行的函数中直接使用外部函数的变量是无法获取到的,因为当执行的时候变量已经销毁了。所以,这里就使用了一个闭包的方法来达到能调用外部函数的目的。
// 通常的setTimeout(function(){...},100)是这样写的,也就是第一个参数是个函数,里面是要执行的代码片段。
// 这里就使用了闭包的方法return function(){...},第一个参数则接收到了一个函数,并往闭包中传入参数,这样就能先将变量赋给闭包的形参,里面的函数调用的就是闭包的形参,外部函数的销毁便不会影响到函数的执行了
addUl = setTimeout(function(a, id, width) {
return function() {
$.post(
'<{:U("Index/type")}>', { 'id': id },
function(data) {
if (data) {
var ul = '<ul style="background:white;position:absolute;left:' + width + 'px;top:-1px;z-index:100;border:1px solid #6386ae";>';
var id;
var href;
$.each(data, function(n, v) {
id = v['type_id'];
// 不能使用array()传参,并且还要加上Home
href = '<{:U("Home/Pro/more/type/' + id + '")}>';
ul += '<li style="margin:0;padding:0;text-align:center;width:100px;height:40px;overflow:hidden;" title="' + v['type_name'] + '"><a href="' + href + '" style="margin:0;width:auto;">' + v['type_name'] + '</a></li>';
});
ul += '</ul>';
a.after(ul);
};
}
);
}
}(a, id, width), 200);
// 阻止事件冒泡:当从三级分类移动到二级分类的时候,由于二级分类是在一级分类里创建的元素,所以会同时触发二级分类和一级分类的mouseenter事件,所以需要阻止冒泡行为!
e.stopPropagation();
} else {
// 当鼠标滑动过快的时候,会移除延迟的AJAX请求
clearTimeout(addUl);
// 鼠标移开任何一个li的时候都会移除子分类
t.find('ul').remove();
}
});
});

动态绑定AJAX,获取下级分类并延迟执行的更多相关文章

  1. js获取时间,循环执行任务,延迟执行任务

    一.获取时间 核心方法创建一个时间对象:new Date() 时间对象相关操作 时间对象.函数名 函数名 功能 getYear() 获取四位数的年份 getMonth() 获取2位数的月数, 这个是从 ...

  2. 通过async实现协程的延迟执行及结果获取

    在上一次https://www.cnblogs.com/webor2006/p/12022065.html对于协程的async和wait进行了初步的学习,其可以加速执行的性能,其实对于async它是提 ...

  3. C#中Linq延迟执行问题

    本文来自:http://msdn.microsoft.com/zh-cn/library/bb399393(v=vs.110).aspx http://www.cnblogs.com/zhanglin ...

  4. 放养的小爬虫--京东定向爬虫(AJAX获取价格数据)

    放养的小爬虫--京东定向爬虫(AJAX获取价格数据) 笔者声明:只用于学习交流,不用于其他途径.源代码已上传github.githu地址:https://github.com/Erma-Wang/Sp ...

  5. LINQ之路 6:延迟执行(Deferred Execution)

    LINQ中大部分查询运算符都有一个非常重要的特性:延迟执行.这意味着,他们不是在查询创建的时候执行,而是在遍历的时候执行(换句话说,当enumerator的MoveNext方法被调用时).让我们考虑下 ...

  6. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  7. Linq延迟执行

    LINQ中大部分查询运算符都有一个非常重要的特性:延迟执行.这意味着,他们不是在查询创建的时候执行,而是在遍历的时候执行(换句话说,当enumerator的MoveNext方法被调用时).让我们考虑下 ...

  8. JS页面延迟执行一些方法(整理)

    一般在JS页面延迟执行一些方法.可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中que ...

  9. ajax多次请求,只执行最后一次的方法

    ajax多次请求,只执行最后一次的方法 有时候点击按钮进行异步请求数据的时候可能网络差,用户会点击很多次,或者页面有很多相同的按钮,参数不同,但是调用的ajax相同,只想得到最后一次结果 我的思路是用 ...

随机推荐

  1. template.js 模版内调用外部JS方法

    template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.模版定义如下: ...

  2. R—读取数据(导入csv,txt,excel文件)

    导入CSV.TXT文件 read.table函数:read.table函数以数据框的格式读入数据,所以适合读取混合模式的数据,但是要求每列的数据数据类型相同. read.table读取数据非常方便,通 ...

  3. 使用Jenkins实现maven项目一键部署

    下面的博客请详细的,值得一看:jenkins+maven+svn实现简单的一键发布 http://blog.csdn.net/pein_zero/article/details/52597615#co ...

  4. hdu5253 MST

    连接的管道 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  5. HashTable vs HashMap(三)

    HashTable的应用非常广泛,HashMap是新框架中用来代替HashTable的类,也就是说建议使用HashMap,不要使用HashTable. 可能你觉得HashTable很好用,为什么不用呢 ...

  6. 练习vue(用户管理)1

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 用MyEclipse JPA创建项目(三)

    MyEclipse 3.15 Style——在线购买低至75折!火爆开抢>> [MyEclipse最新版下载] 本教程介绍了MyEclipse中的一些基于PA的功能. 阅读本教程时,了解J ...

  8. <小常识>

    1,DOS(磁盘操作系统) 2,人机交互: (1):图形化界面(Graphical User interface GUI), (2):命令行方式(Command Line Interface CLI) ...

  9. 使用adb命令对手机进行截屏保存到电脑,SDCard

    adb shell /system/bin/screencap -p /sdcard/screenshot.png(保存到SDCard) adb pull /sdcard/screenshot.png ...

  10. Python 名称空间和作用域

    a = 10 # lst = [1,2,3,4] # # # 内置函数 print("你好啊,我叫赛利亚") # def chi(): a = 10 b = 20 # # # # ...