如果不透明度在 setInterval 中 == 1，则将 1 添加到变量

Question

我有一个变量，每次元素 opacity 为 1 时我都需要加 1。我需要继续检查不透明度，所以我将它包装在 setInterval 中。

我想知道是否有一种方法可以在每次不透明度更改为 1 时只将变量加 1，而不是因为时间间隔而一遍又一遍地加 1。这是我的代码

var number = 1;

var intervalsizer = setInterval(function() {
  if ($(".cardButtons__discuss").css('opacity') == 1) {
    number++;
    console.log(number)
  }

  function fooo() {
    if (number == 1) {
      //do something
    }
    if (number == 2) {
    }
    if (number == 3) {
      //do something
    }
    if (number == 4) {
      //do something
    }
  }
}, 50);

提前致谢

Answer 1

可以使用 MutationObserver 来跟踪属性。此代码跟踪元素上的所有属性更改，并专门过滤掉对 style 和 class 属性的更改。当属性更改时，它会查看不透明度值是否已更改。

此解决方案仅在通过设置 class 或设置样式更改元素本身的不透明度时有效。

const mydiv = document.getElementById('mydiv')

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if(mutation.attributeName !== 'style' && mutation.attributeName !== 'class') return;
    const target = $(mutation.target);
    const oldVal = target.data("oldOpacity");
    const newVal = getComputedStyle(target[0]).opacity;
    if(oldVal != newVal) {
      console.log(`opacity changed. Old: ${oldVal}, New: ${newVal}`)
      target.data("oldOpacity", newVal)
    }
  });    
});

const config = { 
  attributes: true 
};
 
observer.observe(mydiv, config);


//code to change the opacity and another style attribute.
let i = 0;
setInterval(() => {
  switch (i % 4) {
    case 0:
      mydiv.style.backgroundColor = "red"
      break
    case 1:
      mydiv.style.opacity = "0.5"
      break
    case 2:
      mydiv.classList.add('blue')
      break
    case 3:
      mydiv.style.opacity = ""
      mydiv.classList.remove('blue')
      mydiv.style.backgroundColor = "blue"
      break;
  }
  i++;
}, 1000)

.blue {
  background-color: blue !important;
  opacity: 1 !important;
}

#mydiv {
  background-color: red;
  width: 100px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>

如果不透明度在 setInterval 中 == 1，则将 1 添加到变量

Add 1 to variable if opacity is == 1 within a setInterval

javascript

jquery

var

setinterval