Форум

Padavan · #1 (**permalink**) 06.07.2015, 16:43

Добрый день уважаемые форумчане!
Изучать JavaScript начал недавно, написал простейший скрипт, который при наведении на блок, изменяет его координаты в документе(+- рандомные значения), тем самым имитируя побег блока от пользователя.
Все бы хорошо, но если поиграться таким образом 40+ секунд, то заметно ухудшение отзыва блока, при следующем наведении. Прошу мне разъяснить данный момент, есть подозрения, что при наведении я регистрирую новые функции, накапливая их в памяти, но я не уверен.
Заранее спасибо.
Ссылка на песочницу: http://codepen.io/Padavan/pen/zGWOmz

рони · #2 (**permalink**) 06.07.2015, 17:24

Padavan,
setInterval(myFun,0); зачем это нужно? проверить насколько хватит мощности браузера и компа?

Deff · #3 (**permalink**) 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(){

рони · #4 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript