首页 > 网络编程 > JavaScript > javascript技巧 > 延迟执行

选择器的朋友可以试试这个思路延迟执行归并选择操作

2011-01-05 23:41:19 作者：

因为通常选择器需要遍历整个元素树，所以当多次选择会比较耗时，忽然想到是否能利用setTimeout将多次选择操作归并到一起

这样像类似下面的四个同一代码段中的4个选择操作
$class("a").color("green");
$class("b").color("red");
$class("c").color("green");
$class("d").color("red");
最终只需要一次遍历就可以实现了。
因为之前么有太关注选择器的问题，不知道是不是我out了，大家早就已经想到了？
下面是sample，两次选择一次遍历

<body> 
<div class="a">aaaaaaaaaaaaaa</div> 
<div class="a b">bbbbbbbbbbbb</div> 
<div class="b">cccccccccccccccc</div> 
</body> 
<script> 
var $class = function () { 
var checker = []; 
var updateHandler = null; 
var traverse = function (node,func){ 
func(node); 
for(var i = 0; i<node.childNodes.length; i++) 
{ 
func(node.childNodes[i]) 
} 
} 
function update () { 
traverse(document.body,function(node){ 
for(var i = 0 ; i< checker.length; i++) 
checker[i](node); 
}); 
checker = []; 
updateHandler = null; 
} 
function startupdate() { 
if(updateHandler!==null) return ; 
updateHandler = setTimeout(update,10); 
} 
var $class = function(jpath){ 
var color; 
checker.push(function(node){ 
if(typeof node.className != "string")return; 
var classes = node.className.split(" ") 
for(var i = 0; i < classes.length ; i++) 
if(classes[i] == jpath && color) { 
node.style.backgroundColor = color; 
break; 
} 
}); 
return { 
color:function(v){ 
color = v; 
startupdate(); 
} 
} 
} 
$class.update = update; 
return $class; 
}(); 
$class("a").color("green"); 
$class("b").color("red"); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

选择器的朋友可以试试这个思路 延迟执行归并选择操作

选择器的朋友可以试试这个思路延迟执行归并选择操作