Why doesn't the remove() function exactly work when I click the mouse quickly?-CodePudding

When I click next button or previous button quickly a lot then

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

this remove() function is not exactly working.

Is that common error or is there a solution for that?

$(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>

screenshot

CodePudding user response：

Re: Multiple ULs Get rid of this line - I can't see why you need it.:

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

Re: remove(): Consider blocking the functionality until it's had a chance to complete. Something like

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

  // reset it here
  blockUI = false
});

Put the same check and reset on the $('#next')... listener. That will prevent over-clicking breaking the functionality