js--BOM--超时调用、间歇调用

米卡小米

于 2021-11-09 14:41:41 发布

阅读量175

点赞数

分类专栏： js 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/cmy741741/article/details/121227655

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

间歇调用和超时调用

javascript 是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行

l setTimeout()

该方法返回一个数值 ID ，表示超时调用，这个超时调用 ID 是计划执行代码的唯一标识符通过它来取消超市调用。可以通过 clearTimeout(ID);

参数：

1. 要执行的代码

2. 以毫秒表示的时间。

例如 : 一秒后调用

var id = setTimeout(function(){

alert(1000);

},1000);

console.log(id);

clearTimeout(id)

// 清除

l setInterval()

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用 ID ，该 ID 可以用户在将来某个时刻取消间歇调用

参数：

1. 要执行的代码

2. 以毫秒表示的时间。

clearInterval(ID); // 取消间歇调用

l 使用超时调用来模拟间歇调用

var num = 0;

var max = 10;

function incrementNum(){

num ++;

if(num < max){

alert(num);

setTimeout(incrementNum,500);

}else{

alert("Done"+num);

}

}

setTimeout(incrementNum,500);

l setTimeout，setInterval配合完成调用函数

function invoke(f,start,interval,end){

    if(!start){start = 0;}

    if(arguments.length<=2){

        setTimeout(f,start);

    }else {

        function repeat(){

            var h = setInterval(f,interval);

            if(end){

                setTimeout(function(){

                    clearInterval(h);

                },end);

            }

         }

         setTimeout(repeat,start);

     }

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>超时调用、简写调用</title>
  <script>
    

    console.log(id1);
    // 清除超时调用
    clearTimeout(id1);

    // 间歇调用
    var id2 = setInterval(function() {
      console.log('间歇调用');
    }, 1000)

    var id1 = setTimeout(function() {
      console.log('超时调用');
      // 清除间歇调用
      clearInterval(id2)
    },5000)

  </script>
</head>
<body>
  超时调用
</body>
</html>