为什么当我快速单击鼠标时 remove() function 不能正常工作？

Question

When I click next button or previous button quickly a lot then当我快速单击下一个按钮或上一个按钮时

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

this remove() function is not exactly working.这个 remove() function 不能正常工作。

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截屏

Answer 1

Re: Multiple ULs Get rid of this line - I can't see why you need it.:回复：多个 UL 摆脱这条线 - 我看不出你为什么需要它。：

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

Re: remove(): Consider blocking the functionality until it's had a chance to complete.回复：remove()：考虑阻止该功能，直到它有机会完成。 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.对$('#next')...监听器进行相同的检查和重置。 That will prevent over-clicking breaking the functionality这将防止过度点击破坏功能

为什么当我快速单击鼠标时 remove() function 不能正常工作？

问题描述

1 个解决方案

解决方案1
1 2021-12-02 17:56:33

为什么当我快速单击鼠标时 remove() function 不能正常工作？

问题描述

1 个解决方案

解决方案1 1 2021-12-02 17:56:33

解决方案1
1 2021-12-02 17:56:33