There is a script in which the animate () function is used; it just simply changes the left property of several elements, but when you open a dozen tabs or load the browser with chrome in other ways, this function starts to lag and the values ​​are set incorrectly, as a result of which the blocks run over each other, like to solve it?

/* global $ */ setInterval(function () { var length = $('#mytag .item').length; var left = parseInt($('#mytag').css('left')); if (length > 4 && left == 0) { $('#mytag').animate({ left: 0 - parseInt($('#mytag .item').outerWidth()) }, { duration: 1000, complete: function () { $('#mytag .item').eq(0).remove(); $('#mytag').css('left', 0); } }); } }, 2000); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • it is impossible to use any libraries in this case for some reason, and movement with the help of setInterval () - misha11
  • "there is a script" - it may be so, but where it is, what is there in it in this script, how to evaluate it? could be placed on the codepen or here. If, when opening a dozen tabs, the script slows down, it may generally be a problem of a video card, computer, etc. - diproart
  • setInterval (function () {if ($ ('# mytag .item'). length> 4 && parseInt ($ ('# mytag'). css ('left')) == 0) {$ ('# mytag' ) .animate ({left: 0-parseInt ($ ('# mytag .item'). outerWidth ())}, {duration: 1000, complete: function () {$ ('# mytag .item'). eq ( 0) .remove (); $ ('# mytag'). Css ('left', 0);}})}}, 2000); such a script is an append function that works in parallel, it simply adds elements but it has nothing to do, so that it is clear that elements are added - misha11
  • Something code is not matched - misha11
  • even if this computer slows down, and in fact this is what happens then why conditions are ignored, because every time it is done, it is checked if 4 elements are checked more and the left property is equal to zero and how it is done - misha11

0