為什么當我快速單擊滑鼠時remove()函式不能正常作業？-有解無憂

當我快速點擊下一個按鈕或上一個按鈕時

$('#slider ul').first().remove();

這個 remove() 函式不能正常作業。

這是常見錯誤還是有解決方案？

$(window).on('load', function() {
    'use strict';

    const imageCount = $("#slider ul li").length;
    const imageWidth = $("#slider ul li img").first().width();
    const totalWidth = (imageWidth * imageCount)   'px';
    //alert(totalWidth);

    let leftPosition = 0;
    let counter = 0;

    $('#slider ul').css('width', totalWidth);

    $('#next').click(function(){
        counter  ;

        if(counter === imageCount){

            $('#slider ul').clone().appendTo('#slider');
            $('#slider ul').last().css('left', imageWidth   'px'); 

            leftPosition = `-${totalWidth}`

            $('#slider ul').last().animate({left: 0}, 700, 'easeInQuad');
            $('#slider ul').first().animate({left: leftPosition}, 700, 'easeInQuad', function(){
                $('#slider ul').first().remove();
            });

            counter = 0;
        } else{
            leftPosition = `-${counter * imageWidth}px`
            $('#slider ul').animate( {left : leftPosition}, 700, 'easeInQuad');
        }

       
    });

    $('#previous').click(function(){
        counter--;

        if(counter < 0){
            counter = imageCount-1;

            $('#slider ul').clone().appendTo('#slider');
            $('#slider ul').last().css('left', `-${totalWidth}`);

            leftPosition = `-${counter * imageWidth}`;
            

            $('#slider ul').last().animate({left: leftPosition}, 700, 'easeInQuad');
            $('#slider ul').first().animate({left: imageWidth   'px'}, 700, 'easeInQuad', function(){
                $('#slider ul').first().remove();
            });

            

        } else {
            leftPosition = `-${counter * imageWidth}px`;
            $('#slider ul').animate( {left : leftPosition}, 700, 'easeInQuad');
        }

       
    });
});

body { padding: 100px; background:#717171; }

#slider {
    width:400px;
    overflow:hidden;
    border: 10px solid #4C4C4C;
    height:266px;
    position:relative;
    margin:auto;
}

#slider ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
}

#slider ul li img {
    display: block;
}

/********** Link Styles ***********/

#links {
    width:420px;
    display: flex;
    margin: 0 auto;
}

#links a {
    display:block;
    width:210px;
    background:#6C0204;
    height:50px;
    line-height:50px;
    color:#D5D5D5;
    text-decoration:none;
    font-family:Arial;
    text-transform:uppercase;
    text-align:center;
}

#links a:hover {
    background:#A51D1F;
    color:#fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Basic jQuery Image Slider</title>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" defer></script>

    <script src="script.js" defer></script>

</head>

<body>

    <div id="slider">
        <ul>
            <li><img src="slides/image1.jpg" alt="slideshow image"></li>
            <li><img src="slides/image2.jpg" alt="slideshow image"></li>
            <li><img src="slides/image3.jpg" alt="slideshow image"></li>
            <li><img src="slides/image4.jpg" alt="slideshow image"></li>
            <li><img src="slides/image5.jpg" alt="slideshow image"></li>
        </ul>
    </div>

    <p id="links"><a href="#" id="previous">previous</a><a href="#" id="next">next</a></p>

</body>

</html>

截屏

為什么當我快速單擊滑鼠時 remove() 函式不能正常作業？

uj5u.com熱心網友回復：

回復：多個 UL 去掉這條線 - 我不明白你為什么需要它。：

$('#slider ul').clone().appendTo('#slider');

回復：remove()：考慮阻止該功能，直到它有機會完成。就像是

let blockUI = false
$('#next').click(function() {
  // check for blockUI
  if (blockUI) return;
  blockUI = true;
  
  counter  ;
  if (counter === imageCount) {
    ...
  }

  // reset it here
  blockUI = false
});

對$('#next')...偵聽器進行相同的檢查和重置。這將防止過度點擊破壞功能

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/372154.html

標籤：javascript 查询

上一篇：根據是否包含字串的一部分，回傳陣列中的所有物件

下一篇：jquery在最近的元素之前移動元素