Как проверить переменную на изменение?

Question

[zeni1agent]

Я хочу периодически проверять изменился ли css элемента и если да то обновить код если нет то ничего не делать.

.block{
top:10px;
left:19px;
transition: 1s;
}
.block_active{
top:130px;
left:150px;
}

setInterval(function () {
top = parseInt($('.block').css("top"));
left = parseInt($('.block').css("left"));
if(top != ??? && left != ???){
invert_top = (0-top)
invert_left = (0-left)
$('style').html('#div1{top:'+top+'px;left:'+left+'px;}#div2{top:'+invert_top+'px;left:'+invert_left+'px;}')
}
}, 10)
$('.button').on('click', function(e){
		e.preventDefault();
		$('block').toggleClass('block_active');
})

Нельзя поставить дополнительно width2 и height2 вне setInterval и проверять совпадение

top2 = parseInt($('.block').css("width"));
left2 = parseInt($('.block').css("height"));
setInterval(function () {
top = parseInt($('.block').css("width"));
left = parseInt($('.block').css("height"));
if( top !=top2  && left !=left2){
...
}
}, 10)

И нельзя вставить код во внутрь

$('.button').on('click', function(e){
		e.preventDefault();
		$('block').toggleClass('block_active');
})

так как функций-событий у меня не одна а несколько и прописывать каждый раз код не имеет смысла

Comments

[WapSter]

Нашел вариант на stackoverflow. При помощи mutation observer проверять изменения атрибута style, не нужно будет запускать setInterval. И вот наглядный пример https://codepen.io/catkim/pen/ggjGQb при любом изменении атрибута style можешь запускать нужный код, скорее всего тебя это избавит от сравнения со старыми стилями.

[zeni1agent]

WapSter,
Но он работает только с hover. я попробовал использовать его с

#div1{
background:blue;
transition: 1s;
}
#div11{
background:red;
}

$('#div2').on('click', function(e){
		e.preventDefault();
		$('#div1').toggleClass('#div11');
})

[WapSter]

zeni1agent, мда уж.. Про mutationObserver я видимо погорячился. Тебе бы освоить хз события, и атрибуты тэгов..

[zeni1agent]

WapSter,
А причем здесь события и атрибуты тэгов?
Я просто хочу узнавать изменился ли положение или размер элемента вне зависимости от того откуда идет запрос. И что на него влияет. Я знаю что в принципе могу сделать это и при помощи куки но это не совсем корректный способ.

[WapSter]

zeni1agent, ты очень не разбираешься в js. Удачи

Answer 1

[Tendor]

Зачем периодический проверять изменения?
Можно делать проверку

if( width !=width2  && height !=height2 ){
...
}

в тот момент когда происходят изменения, то есть в том месте кода где задаются/изменяются стили.

Если это несколько мест, можно триггерить свой event элемента и подписаться на него делая проверку при вызове этого event.

Comments

[zeni1agent]

Проблема в том что '.block' меняет размер свободно и он редко когда находится в одной позиций дважды.
он может например поменять свойство с width=20 до width=90 после остановится и потом поменять с width=90 до width=120 остановится и после опять поменять свой размер и так до бесконечности.