code:
// 左侧菜单树操作
var isClick = false;
var i = 0;
$('.open_all').click(function () {
i++;
console.log("click"+i+":"+Date.parse(new Date()));
if (isClick) {
console.log("点击过快"+isClick);
larryms.msg("点击过快",{time:500});
return;
}
console.log(i+"准备开始执行");
isClick = true;
var this_node = $(this);
setTimeout(function() {
console.log("start"+i+":"+Date.parse(new Date())+isClick);
// 以下代码在数据量为1000多时,会执行较长时间
if (this_node.hasClass('close_all')) {
leftMenuTree.jstree().close_all();
this_node.removeClass('close_all').text('展开菜单树');
} else {
this_node.addClass('close_all').text('折叠菜单树');
leftMenuTree.jstree().open_all();
}
isClick = false;
console.log("end:"+Date.parse(new Date())+isClick);
}, 0);
});
打印结果:
操作:连续点击8次。
看起来的执行顺序:
- 第1次点击事件主体,设置setTimeout
- 第1次点击的setTimeout内函数。(应该是主体代码执行较快,第二次点击还未发生)
- 第2次点击事件主体,设置setTimeout(应该是:第一次的setTimeout还未执行完毕过程中,发生第2-8次点击)
- 第3次点击事件主体。(跳过)
- 第4次点击事件主体。(跳过)
- 第5次点击事件主体。(跳过)
- 第6次点击事件主体。(跳过)
- 第7次点击事件主体。(跳过)
- 第8次点击事件主体。(跳过)
- 第2次点击的setTimeout内函数。(i值此时被自增到8)
参考链接:js 多线程