JavaScript定时器及回调用法

￡神魔★判官ぃ 2021-11-16 08:54 313阅读 0赞

# JavaScript定时器及回调用法 #

--------------------

### 循环定时任务 ###

// 假设现在有这样一个需求：我需要请求一个接口，根据返回结果判断需不需要重复请求，直到达到某一条件为止,停止请求执行某操作
    <script type="text/javascript">
        var timer;
        var index = 0;
        function tim(){ 
            timer = setInterval(function(){ 
                index++;
                console.log(Math.random())
                if (index === 5) { 
                    window.clearInterval(timer)
                }
            }, 500);
        }
    </script>

### 循环请求并获取返回值 - 拿到返回值后执行操作 ###

#### 回调函数方法 ####

<script>
        function getSomething(cb) { 
             var r = 0;
             setTimeout(function() { 
                 r = 2;
                 cb(r);
             }, 100);
        }
    
        function compute(x) { 
         	alert(x * 2);
        }
        getSomething(compute);
    </script>

#### promise方法 ####

function getSomething() { 
         var r = 0;
         return new Promise(function(resolve) { 
             setTimeout(function() { 
              r = 2;
              resolve(r);
             }, 10);
         });
    }
    
    function compute(x) { 
     	alert(x * 2);
    }
    
    getSomething().then(compute);

#### generator ####

function getSomething() { 
         var r = 0;
         setTimeout(function() { 
             r = 2;
             it.next(r);
         }, 10);
    }
    
    function *compute(it) { 
         var x = yield getSomething();
         alert(x * 2);
    }
    
    var it = compute();
    it.next();

#### promise + generator ####

function getSomething() { 
        var r = 0;
        return new Promise(function(resolve) { 
            setTimeout(function() { 
                r = 2;
                resolve(r);
            }, 10);
        });
    }
    
    function* compute() { 
        var x = yield getSomething();
        alert(x * 2);
    }
    var it = compute();
    it.next().value.then(function(value) { 
        it.next(value);
    });

#### ES7 - 终极方案 ####

<script type="text/javascript">
        function getSomething() { 
            var r = 0;
            return new Promise(function(resolve) { 
                setTimeout(function() { 
                    r = 2;
                    resolve(r);
                }, 10);
            });
        }
    
        async function compute() { 
            var x = await getSomething();
            alert(x * 2);
        }
    	
        // 直接调用compute()方法 -> x为同步请求返回结果，输出4
        compute();
    	
     	// 表示getSomething获取返回值后执行resolve状态 -> 
        // 当.then()前的方法执行完后再执行then()内部的程序，这样就避免了，数据没获取到等的问题
        getSomething().then(compute);
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，313人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript定时器

JavaScript定时器思考在讨论之前，先来思考一个问题，定时器真的是定时执行的么？首先来看一段代码： console.log('定时器启动前'

梦里梦外;/ 2023年08月17日 17:45/ 0 赞/ 111 阅读

相关 JavaScript定时器

time = setInterval(“showAd()”,3000); 每隔3000毫秒执行一次showAd()方法 clearInterval(time); 清除定时操

约定不等于承诺〃/ 2023年06月08日 06:56/ 0 赞/ 34 阅读

相关 JavaScript定时器

文章目录定时器数码时钟延时提示框无缝滑动定时器参考视频：[JavaScript从入门到精通 —

女爷i/ 2023年02月24日 08:29/ 0 赞/ 38 阅读

相关 JavaScript定时器原理及高级使用

javaScript里面内置了两个定时器，一个是setTimeout()一个是setInterval()。下面将由浅入深来理解一下定时器的工作原理。使用方式： setT

深藏阁楼爱情的钟/ 2022年09月25日 06:24/ 0 赞/ 170 阅读

相关 12、JavaScript中定时器setInterval()的用法

1、JavaScript中定时器setInterval()的用法 1.1 html代码 <body> <div id="container"

约定不等于承诺〃/ 2022年08月22日 00:01/ 0 赞/ 159 阅读

相关 Block 简单用法和回调用法

// // BlocksDemo.h // OC基础学习 // // Created by 麦子 on 15/6/8. /

「爱情、让人受尽委屈。」/ 2022年08月05日 05:19/ 0 赞/ 173 阅读

相关 Javascript-定时器

方法1： setInterval( function ()\{\}, time) ; setInterval有俩个参数，前面一个表示执行的语句，后面一个表示间隔的时间（单位

落日映苍穹つ/ 2022年05月27日 13:47/ 0 赞/ 244 阅读

相关 JavaScript 定时器

JavaScript 里有定时器 setInterval(fun,time) / clearInterval() ; 延时器 setTimeout(fun,time) /

谁借莪１个温暖的怀抱￠/ 2022年05月17日 11:40/ 0 赞/ 203 阅读

相关 JavaScript定时器

JavaScript定时器原链接https://www.runoob.com/w3cnote/js-timer.html js定时器有一下两种方法： setInt

短命女/ 2022年01月31日 04:59/ 0 赞/ 233 阅读

相关 JavaScript定时器及回调用法

JavaScript定时器及回调用法 -------------------- 循环定时任务 // 假设现在有这样一个需求：我需要请求一个接口，根据返回结

￡神魔★判官ぃ/ 2021年11月16日 08:54/ 0 赞/ 314 阅读