JS實現(xiàn)給不同元素設(shè)置不同的定時器

更新時間：2022年07月04日 10:56:28 作者：setTimeout()

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)給不同元素設(shè)置不同的定時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)給不同元素設(shè)置不同的定時器，供大家參考，具體內(nèi)容如下

案例效果：

上面的紫色盒子打開頁面會自己移動到300px，點擊上面的按鈕，粉色的span才會移動，并且移動到200px。

注意：需要給定時器單獨命名，如果都寫在同一個封裝函數(shù)里面的話，每次都會開辟一個定時器的空間，這樣就會造成資源浪費，所以直接采用給對象添加定時器屬性的方式來節(jié)約空間。同時要注意，在設(shè)置定時器之前要清除掉這個對象的定時器屬性，因為如果不清除的話，當(dāng)連續(xù)按下按鈕的時候就會又開啟一個定時器這樣下面那個span就會越跑越快。

完整代碼如下：

<!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>Document</title>
? ? <style>
? ? ? ? div {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? top: 50px;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: violet;
? ? ? ? }
? ? ? ??
? ? ? ? span {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? top: 270px;
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: pink;
? ? ? ? }
? ? </style>
?
</head>
?
<body>
? ? <button>點擊這個按鈕span才移動</button>
? ? <div></div>
? ? <span>sy is sy</span>
? ? <script>
? ? ? ? // 動畫函數(shù)
? ? ? ? // obj代表是哪個對象，target代表移動的距離
? ? ? ? function move(obj, target) {
? ? ? ? ? ? // 當(dāng)我們不斷的點擊按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器
? ? ? ? ? ? // 解決方案就是 讓我們元素只有一個定時器執(zhí)行
? ? ? ? ? ? // 先清除以前的定時器，只保留當(dāng)前的一個定時器執(zhí)行
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? obj.timer = window.setInterval(function() {
? ? ? ? ? ? ? ? if (obj.offsetLeft >= target) {
? ? ? ? ? ? ? ? ? ? window.clearInterval(obj.timer);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? obj.style.left = obj.offsetLeft + 1 + 'px';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30);
? ? ? ? }
?
? ? ? ? var div = document.querySelector('div')
? ? ? ? var span = document.querySelector('span')
? ? ? ? var btn = document.querySelector('button')
? ? ? ? move(div, 300);
?
? ? ? ? btn.addEventListener('click', function() {
? ? ? ? ? ? move(span, 200);
? ? ? ? })
? ? </script>
</body>
?
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: