JavaScript定时器 setTimeout/setInterval

2021/3/22 19:26:35admin0 阅读2 评论

<h2>setTimeout 和 clearTimeout</h2>
<code> setTimeout() </code> 延时定时器，即多久时间之后去执行(一次性的)
语法：
主要包含两个参数，函数和单位为毫秒的数值。
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
// 一
setTimeout(“function();”,delaytime);

// 二
// 定义一个变量 (timerId) 用于保存 setTimeout() 这个定时器，以便使用 clearTimeout(timerId) 来取消。
let timerId;
timerId = setTimeout(“function();”,delaytime);

//----------------------------------

// 3秒后在console里打印一句1
function x(){
console.log(1);
}
setTimeout(x,3000);

// 上面代码等效下面的代码

setTimeout(function (){
// alert(1)
console.log(1);
},3000);
</code></pre>

并且可以使用<code> clearTimeout() </code>来取消执行<code> setTimeout() </code>

<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
clearTimeout(timerId );
</code></pre>

<h2>setInterval 和 clearInterval</h2>
<code>setInterval</code> 间隔定时器，每隔一段时间就执行一次（重复执行）
语法：
和<code> setTimeout() </code>用法一样，区别仅在于一次性执行和重复执行，主要包含两个参数，函数和单位为毫秒的数值。
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
// 每个1秒打印会一个数，让i一直加1

setInterval(fn,1000)
var i = 0;
function fn(){
i++;
console.log(i)
}
</code></pre>
使用<code>clearInterval()</code>来取消执行<code>setInterval()</code>

<h2>demo</h2>
<h3>点击移动div</h3>

<pre class=“language-html line-numbers”><code class=“language-html”>
<body>
<button>停止</button>
<div class=“box”></div>
<script>
let box = document.querySelector(‘.box’);
let btn = document.querySelector(‘button’);
let num = 0;
// 1.要结束一个定时器，就先声明一个变量（存定时器）
let timer = null;

   box.onclick = function(){
        // 3.当多次执行时，先把上一次开着的定时器关掉，再往下执行开新的
        clearInterval(timer); //第一次执行时这还是个undefined，会自动忽略
        // 2.然后把（开）定时器里的内容存起来
        timer = setInterval(function(){
            num+=3;
            box.style.left = num+'px';
        },30);
   }

   btn.onclick = function(){
      clearInterval(timer);
   }
&lt;/script&gt;

</body>
</code></pre>
定时器有多次执行或者使用<code>setInterval()</code>时一定要先关再开！！！否则很容易出现一些不可预料的情况。
<p><a class=“case-show” href=“https://assets.ooei.cn/js/Click to move div.html” target=“_blank”>DEMO展示</a></p>

评论区