晴明的博客园 GitHub      CodePen      CodeWars     

[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();
            };

 

posted @ 2016-02-18 18:02  晴明桑  阅读(232)  评论(0)    收藏  举报