原生JavaScript輪播圖的節流

時間 2020-06-16

標籤原生 javascript 節流欄目 JavaScript 简体版

原文原文鏈接

js的防抖與節流

防抖(debounce)

在函數須要頻繁觸發時，只有當有足夠空閒的時間時，才執行一次。就好像在百度搜索時，每次輸入以後都有聯想詞彈出，這個控制聯想詞的方法就不多是輸入框內容一改變就觸發的，他必定是當你結束輸入一段時間以後纔會觸發。css

節流(thorttle)

預約一個函數只有在大於等於執行週期時才執行，週期內調用不執行。就好像你在淘寶搶購某一件限量熱賣商品時，你不斷點刷新點購買，但是總有一段時間你點上是沒有效果，這裏就用到了節流，就是怕點的太快致使系統出現bug。html

區別框架

在發生持續觸發事件時，防抖設置事件延遲並在空閒時間去觸發事件，而節流則是隔必定的時間觸發一次。dom

原生JavaScript輪播圖的節流

原生JavaScript輪播圖的節流是爲了防止輪播圖在不斷的點擊的操做下，形成內容跑飛與錯位的狀況。ide

CSS部分函數

.lunbo {
    /* slideshow */
    width: 202px;
    height: 188px;
    margin: 100px auto;
    background-color: hotpink;
}

.box {
    /* slideshow的主窗口 */
    border: 1px solid black;
    width: 200px;
    height: 186px;
    position: relative;
}

ul {
    /* 全部圖片的列表 */
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
}

li {
    /* 內含img */
    float: left;
}

button {
    /* 滑動按鈕 */
    margin: 0;
    padding: 0;
    text-align: center;
    width: 40px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    border-radius: 5px;
}

.btnL {
    /* left按鈕 */
    position: absolute;
    top: 83px;
    left: 0;
}

.btnR {
    /* right按鈕 */
    position: absolute;
    top: 83px;
    right: 0;
}

HTML部分優化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./effect.css">
</head>

<body>
    <div class="lunbo">
        <div class="box">
            <ul>
                <li><img src="./image/01.jpg" alt=""></li>
                <li><img src="./image/02.jpg" alt=""></li>
                <li><img src="./image/03.jpg" alt=""></li>
                <li><img src="./image/04.jpg" alt=""></li>
                <li><img src="./image/05.jpg" alt=""></li>
                <li><img src="./image/06.jpg" alt=""></li>
            </ul>
            <button class="btnL">left</button>
            <button class="btnR">right</button>
        </div>
    </div>
    <script src="./slideshow.js">
    </script>
</body>

</html>

JS部分節流spa

var btnL = document.getElementsByClassName("btnL")[0];
var btnR = document.getElementsByClassName("btnR")[0]; var box = document.getElementsByClassName("box")[0]; var ul = document.getElementsByTagName("ul")[0]; var liArr = document.getElementsByTagName("li"); // bool爲節流設置開關 var bool = true; // 將ul的width設置爲顯示窗口的width*li的數量 ul.style.width = liArr.length * box.offsetWidth + "px" // 爲顯示窗口設置溢出隱藏 box.style.overflow = "hidden" // 合理的顯示或隱藏按鈕 box.onmouseenter = function() { btnL.style.display = "block" btnR.style.display = "block" }; box.onmouseleave = function() { btnL.style.display = "none" btnR.style.display = "none" }; // 爲了總體美觀將li限制爲顯示區域的大小 for (var i; i < liArr.length; i++) { liArr[i].style.width = box.offsetWidth + "px" } btnL.onclick = function() { if (ul.offsetLeft < 0) { // 節流的關鍵在於一個函數只有在大於等於執行週期時才執行，週期內調用不執行. // 利用開關 在函數執行時關閉再次執行的開關,在函數執行結束的回調中再次開啓開關 if (bool) { bool = false move(ul, ul.offsetLeft + 200, function fn() { bool = true }) // move 是封裝的簡易緩動框架  } } }; btnR.onclick = function() { if (ul.offsetLeft < ul.offsetWidth) if (bool) { bool = false move(ul, ul.offsetLeft - 200, function fn() { bool = true }) } } // 簡易緩動框架 function move(dom, left, fn) { // 優化寫法先清除dom身上的定時器 // 在有節流的狀況下能夠不寫  clearInterval(dom.timer); dom.timer = setInterval(function() { // 獲取dom此時所處的位置信息 var css = parseInt(window.getComputedStyle(dom, null).left) // 設置步長 var need = (left - css) / 10; need = need > 0 ? Math.ceil(need) : Math.floor(need); // 判斷是繼續執行仍是結束定時器 if (Math.abs(left - css) <= Math.abs(need)) { // 閃現到目標位置 dom.style.left = left + "px" clearInterval(dom.timer); if (fn) { fn() } } else { // 緩動中 dom.style.left = css + need + "px" } }, 100) }

以上純屬我的見解，若有錯誤，歡迎你們指出。3d

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。