[js] setTimeout
#
var n = 0; function a() { // if (n > 5) { // //如果不用 clearTimeout()则需要把 return false 判定放最前面 // return false; // } console.log(n); var c = setTimeout(arguments.callee, 100); //var c = setTimeout(a, 100); n++; if (n > 5) { clearTimeout(c); } console.log('a' + n); } setTimeout(a, 100);
#
setTimeout(function() { // if (n > 5) { // //如果不用 clearTimeout()则需要把 return false 判定放最前面 // return false; // } console.log(n); var c = setTimeout(arguments.callee, 100); n++; if (n > 5) { clearTimeout(c); } console.log('a' + n); }, 100);
#
var n = 0; function a() { console.log(n); var c = setTimeout(a, 100); n++; if (n > 5) { clearTimeout(c); } console.log('a' + n); } a();
#一般移动动画的实现
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="myDiv" style="position:absolute;width:100px;height:100px;left:0px;top:10px;background:red;"></div>
<script type="text/javascript">
setTimeout(function() {
var div = document.getElementById("myDiv"),
left = parseInt(div.style.left)+1;
//console.log(left);
div.style.left = left + "px";
if (left < 200) {
setTimeout(arguments.callee, 10);
}
}, 10);
</script>
</body>
</html>
#数组分块 array chunking (yielding processes)
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="myDiv" style="background:red;"></div>
<script type="text/javascript">
var data = [12,123,1234,453,436,23,23,5,4123,45,346,5634,2234,345,342];
function chunk(array, process, context){
setTimeout(function(){
var item = array.shift();
console.log(data);
process.call(context, item);
if (array.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
}
function printValue(item){
var div = document.getElementById("myDiv");
div.innerHTML += item + "<br>";
}
// chunk(data, printValue);
chunk(data.concat(), printValue);
</script>
</body>
</html>
#函数节流，防止连续重复操作
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="myDiv" style="background:red;"></div>
<script type="text/javascript">
function throttle(method, scope) {
clearTimeout(method.tId);
method.tId= setTimeout(function(){
method.call(scope);
}, 100);
}
function resizeDiv(){
var div = document.getElementById("myDiv");
div.style.height = div.offsetWidth + "px";
}
window.onresize = function(){
throttle(resizeDiv);//只需要获得最后一刻的操作结果
};
</script>
</body>
</html>
#
var processor = { timeoutId: null, performProcessing: function() { var div = document.getElementById("myDiv"); div.style.height = div.offsetWidth + "px"; }, //初始化 process: function() { clearTimeout(this.timeoutId); var that = this; this.timeoutId = setTimeout(function() { that.performProcessing(); }, 100) } } window.onresize = function() { processor.process(); };
