Производительность скрипта
Добрый день уважаемые форумчане!
Изучать JavaScript начал недавно, написал простейший скрипт, который при наведении на блок, изменяет его координаты в документе(+- рандомные значения), тем самым имитируя побег блока от пользователя. Все бы хорошо, но если поиграться таким образом 40+ секунд, то заметно ухудшение отзыва блока, при следующем наведении. Прошу мне разъяснить данный момент, есть подозрения, что при наведении я регистрирую новые функции, накапливая их в памяти, но я не уверен. Заранее спасибо. Ссылка на песочницу: http://codepen.io/Padavan/pen/zGWOmz |
Padavan,
setInterval(myFun,0); зачем это нужно? проверить насколько хватит мощности браузера и компа? |
(function (){ function getRandomInt(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min; } var myText = ["Не получилось, да?","Пробуй еще!","Почти вышло))"]; var a,b; var butt = $(".myButt ul"); function myFun(){ var numMyText = getRandomInt(0, myText.length-1); a = getRandomInt(0,500); b = getRandomInt(0,500); } butt.mouseover(function(){ myFun(); butt.css({"position": "absolute", "margin": a+"px "+b+"px"}); $(".main").html(myText[numMyText]); }); }()); Генерили постоянно : butt.mouseover(function(){ |
Padavan,
<!DOCTYPE html> <html class=''> <head><meta charset='UTF-8'> <style class="cp-pen-styles"> .myButt { width: 100%; display: flex; } .myButt ul { margin: 40px auto; } .myButt ul li { display: flex; width: 100px; height: 50px; background-color: black; list-style-type: none; text-align: center; } .myButt ul li:hover { box-shadow: inset 0px -4px 0px red; border-right: 1px solid red; border-left: 1px solid red; } .myButt ul li a { display: inline-block; color: red; text-decoration: none; margin: auto; } </style></head><body> <div class="myButt"> <ul> <li><a href="#" class="main">Ну ка наведи</a></li> </ul> </div> </script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script> function getRandomInt(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min; } var myText = ["Не получилось, да?","Пробуй еще!","Почти вышло))"]; var a,b; var butt = $(".myButt ul"); (function(){ butt.mouseover(function(){ var numMyText = getRandomInt(0, myText.length-1); a = getRandomInt(0,500); b = getRandomInt(0,500); butt.css({"position": "absolute", "margin": a+"px "+b+"px"}); $(".main").html(myText[numMyText]); }); }()) ; </script> </body></html> |
Часовой пояс GMT +3, время: 11:26. |