Вход

Просмотр полной версии : Производительность скрипта

Padavan
06.07.2015, 16:43
Добрый день уважаемые форумчане!
Изучать JavaScript начал недавно, написал простейший скрипт, который при наведении на блок, изменяет его координаты в документе(+- рандомные значения), тем самым имитируя побег блока от пользователя.
Все бы хорошо, но если поиграться таким образом 40+ секунд, то заметно ухудшение отзыва блока, при следующем наведении. Прошу мне разъяснить данный момент, есть подозрения, что при наведении я регистрирую новые функции, накапливая их в памяти, но я не уверен.
Заранее спасибо.
Ссылка на песочницу: http://codepen.io/Padavan/pen/zGWOmz
рони
06.07.2015, 17:24
Padavan,
setInterval(myFun,0); зачем это нужно? проверить насколько хватит мощности браузера и компа?
Deff
06.07.2015, 17:27
(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(){
рони
06.07.2015, 17:34
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>