JavaScript timers simple small case

Timer

			setInterval(function(){
			},t)
		每隔t ms执行一次。***要注意，循环执行的***

Clear timers
said above, the timer cycle is executed, in some cases, we do not want it to perform loop, so it is necessary to clear the timer.
Clear timer delay can be accomplished.

clearInterval（定时器名称）；

A simple example

let sum = setInterval(function(){
	console.log(x);
},100);

let x=9;
steTimeout(function(){
	clearInterval(sum);
},300)

After the above code to print out 3 times 9 will stop printing
Here Insert Picture Description
3, a small case on the timer (make a small circle around the great circle in a circular motion)

		代码部分

<style>
    body{
        margin: 0;
    }
    .round{
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 400px;
        border:1px solid red;
        border-radius: 50%;
        margin:100px auto 0;
    }
    .point{
        width: 10px;
        height: 10px;
        border:1px solid blue;
        border-radius: 50%;
        background-color: blue;
    }
</style>
<body>
    <div class="round"> 
        <div class="point"></div>
    </div>
    <script>
        let oPoint=document.querySelector(".point");
        let STEP=Math.PI/60;
        let cow=0;

        setInterval(function(){
            oPoint.style.transform="translate("+200*Math.sin(cow)+"px,"+200*Math.cos(cow)+"px)";
            cow+=STEP;
        },1000/60)
    </script>

Results section

Here Insert Picture Description
Since I inserted a static picture this, could not see the small circle around the great circle in a circular motion. But it really is in a circular motion.

It is wonderful in accordance ah

Published an original article · won praise 4 · views 34

Private letter concerns

JavaScript timers simple small case

Guess you like