the following code, if you keep it on the current tab, everything will be fine.
but just switch to another tab for a few seconds on the way, and then switch back and crash.
what exactly does it work?
(of course I know there are many other ways to avoid this situation, but I"d like to know the mechanism of such problems)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.wrapper {
padding: 10px;
border: 1px solid -sharp000;
width: 300px;
margin: 0 auto;
}
.container {
height: 200px;
position: relative;
font-size: 0px;
overflow: hidden;
}
.banner {
position: absolute;
width: 1800px;
}
.banner a {
display: inline-block;
width: 300px;
height: 200px;
font-size: 50px;
}
.banner a:nth-child(1) {
background-color: rgb(219, 106, 106);
}
.banner a:nth-child(2) {
background-color: rgb(108, 223, 73);
}
.banner a:nth-child(3) {
background-color: rgb(194, 57, 212);
}
.banner a:nth-child(4) {
background-color: rgb(219, 106, 106);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="banner">
<a href="-sharp">1</a>
<a href="-sharp">2</a>
<a href="-sharp">3</a>
<a href="-sharp">3(2)</a>
</div>
</div>
</div>
</body>
<script>
let banner = document.getElementsByClassName("banner")[0],
unitWidth = 300,
unitNum = 3
let move = function (e, ds, callback) {
e.move = setInterval(function () {
if (ds > 0) {
e.style.left = e.offsetLeft + 10 + "px"
ds -= 10
} else if (ds < 0) {
e.style.left = e.offsetLeft - 10 + "px"
ds += 10
} else {
clearInterval(e.move)
callback()
}
}, 20)
}
let autoStart = function () {
banner.auto = setInterval(function () {
move(banner, -300, function () {
if (banner.offsetLeft === -unitWidth * unitNum) {
banner.style.left = 0
}
})
}, 1600)
}
autoStart()
</script>
</html>