Browser control over non-current tab elements.

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>
Mar.18,2021

http://www.it1352.com/341638.

this is considered by a browser to be optimized. The solution is Web Workers operations to process this data


to help you optimize it, take a look at the code

let banner = document.getElementsByClassName('banner')[0],
        unitWidth = 300,
        unitNum = 3
    var ods;
    let move = function (e, ds, callback) {
        if(ods && ods!=0)return;
        clearTimeout(e.move);
        ods=ds;
        e.move = setInterval(function () {
            if (ods > 0) {
                e.style.left = e.offsetLeft + 10 + 'px'
                ods -= 10
            } else if (ods < 0) {
                e.style.left = e.offsetLeft - 10 + 'px'
                ods += 10
            } else {
                callback();
                clearInterval(e.move);
            }
            // console.log(ds);
        }, 30)
    }

    let autoStart = function () {
        clearInterval(banner.auto);
        // if(Math.abs(banner.offsetLeft)%300!=0)return;
        banner.auto = setInterval(function () {
            move(banner, -300, function () {
                if (banner.offsetLeft <= (-unitWidth * unitNum)) {
                    banner.style.left = 0;
                }
            })
        }, 1600)
    }

    autoStart()

now JQ or CSS3 is easy to use. If you want to develop quickly, use less native JS.
if you want to understand the principle, there is no problem

expect you to solve the problem as soon as possible ~


window.onblur clears the timer when switching pages

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bec754-46b40.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bec754-46b40.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?