Javascript 如何通过按下按钮使不透明度停止褪色？

目前，我的线条不透明度每400ms降低3%。我希望这个功能继续，但我也希望创建一个按钮按下功能，一旦用户按下按钮，淡入停止和不透明度，淡入停止可以被记录。非常感谢你

const step = 0.03

// Helper function to extract the stimulus elements
const getLines = () => 
  ['one', 'two', 'five', 'fourteen', 'fifteen']
    .map(id => document.getElementById(id))

getLines().forEach(line => line.style.opacity = 1);

// Setup event handler
var timer = undefined;
function decreaseOpacity() {
  getLines().forEach(line => {
        line.style.opacity -= step
        console.log(line.style.opacity);
  });
  timer = setTimeout(() => {
    decreaseOpacity();
  }, 400);
}
decreaseOpacity();

---

您可以使用

clearTimeout（timer）

停止计时器。为了便于访问，我使用了一个额外的变量来存储不透明度。它可以像这样工作。我试着猜你的台词会是什么样子，但可能是错的（哈哈）

const step=0.03
//辅助函数提取刺激元素
常量getLines=（）=>
一、二、五、十四、十五
.map（id=>document.getElementById（id））
getLines（）.forEach（line=>line.style.opacity=1）；
//设置事件处理程序
var定时器=未定义；
var-opac=1；
函数decreaseOpacity（）{
opac-=阶跃；
如果（opac>0）{
getLines（）.forEach（行=>{
line.style.opacity-=步长
//console.log（line.style.opacity）；
});
计时器=设置超时（（）=>{
降低透明度（）；
}, 400);
}
}
降低透明度（）；
document.getElementById（“stopButton”）.onclick=e=>{
清除超时（计时器）；
e、 目标值=opac；
}

行{边距：30px；行高：0；字体大小：0；边框底部：1px纯黑色；}
#两个{边框底部宽度：2px；}
#五{边框底部宽度：5px；}
#十四{边框底宽：14px；}
#十五{边框底宽：15px；}

---

您可以使用

清除超时（计时器）

停止计时器。为了便于访问，我使用了一个额外的变量来存储不透明度。它可以像这样工作。我试着猜你的台词会是什么样子，但可能是错的（哈哈）

const step=0.03
//辅助函数提取刺激元素
常量getLines=（）=>
一、二、五、十四、十五
.map（id=>document.getElementById（id））
getLines（）.forEach（line=>line.style.opacity=1）；
//设置事件处理程序
var定时器=未定义；
var-opac=1；
函数decreaseOpacity（）{
opac-=阶跃；
如果（opac>0）{
getLines（）.forEach（行=>{
line.style.opacity-=步长
//console.log（line.style.opacity）；
});
计时器=设置超时（（）=>{
降低透明度（）；
}, 400);
}
}
降低透明度（）；
document.getElementById（“stopButton”）.onclick=e=>{
清除超时（计时器）；
e、 目标值=opac；
}

行{边距：30px；行高：0；字体大小：0；边框底部：1px纯黑色；}
#两个{边框底部宽度：2px；}
#五{边框底部宽度：5px；}
#十四{边框底宽：14px；}
#十五{边框底宽：15px；}

回答： 您可以创建一个构造函数，将按钮方法和计时器连接在一起：

function FadeMechanic(element) {
  let proto = {};
  proto.start = function() {
    proto.timer = setInterval(function() {
      element.style.opacity = getComputedStyle(element).opacity - .1;
    }, 1000);
  }
  proto.stop = function() {
    clearInterval(proto.timer);
    console.log(element.style.opacity);
  }
  return proto;
}

---

例子：

let el=document.querySelector.bind（文档），
start=el（“#start”），
停止=el（“停止”），
目标=el（“音量控制器”）；
功能FadeMechanic（元素）{
设proto={}；
proto.start=函数（）{
proto.timer=setInterval（函数（）{
element.style.opacity=getComputedStyle（element）.opacity-.1；
}, 1000);
}
proto.stop=函数（）{
clearInterval（原型计时器）；
console.log（element.style.opacity）；
}
返回原型；
}
让音量控制器=音量机械（目标）；
start.addEventListener（“单击”，音量控制器.start）；
停止.addEventListener（“单击”，音量控制器.stop）
部分{
宽度：100px；
高度：100px；
背景：黑色；
不透明度：1；
}
开始
停止
回答：
您可以创建一个构造函数，将按钮方法和计时器连接在一起：

function FadeMechanic(element) {
  let proto = {};
  proto.start = function() {
    proto.timer = setInterval(function() {
      element.style.opacity = getComputedStyle(element).opacity - .1;
    }, 1000);
  }
  proto.stop = function() {
    clearInterval(proto.timer);
    console.log(element.style.opacity);
  }
  return proto;
}


例子：

let el=document.querySelector.bind（文档），
start=el（“#start”），
停止=el（“停止”），
目标=el（“音量控制器”）；
功能FadeMechanic（元素）{
设proto={}；
proto.start=函数（）{
proto.timer=setInterval（函数（）{
element.style.opacity=getComputedStyle（element）.opacity-.1；
}, 1000);
}
proto.stop=函数（）{
clearInterval（原型计时器）；
console.log（element.style.opacity）；
}
返回原型；
}
让音量控制器=音量机械（目标）；
start.addEventListener（“单击”，音量控制器.start）；
停止.addEventListener（“单击”，音量控制器.stop）
部分{
宽度：100px；
高度：100px；
背景：黑色；
不透明度：1；
}
开始
停止
您需要清除单击按钮的超时，以使其停止

function stopTimeout(e) {
  clearTimeout(timer);
  opacity_level = e.target.style.opacity;
}

document.getElementById("#somebutton").onclick = stopTimeout()

您需要清除单击按钮的超时，以使其停止

function stopTimeout(e) {
  clearTimeout(timer);
  opacity_level = e.target.style.opacity;
}

document.getElementById("#somebutton").onclick = stopTimeout()

如果将
timer
作为参数传递，则可以帮助停止该过程。例如，您可以在click event listener函数中使用它。信息：您应该使用setInterval而不是setTimeout，并重新设计代码，因为否则您将一直使用递归（memoryleak）。您应该使用if语句防止负不透明度，因为它会更改任何内容，并且只需要Resources。如果将
timer
作为参数传递，则可以帮助停止该过程。例如，您可以在click event listener函数中使用它。信息：您应该使用setInterval而不是setTimeout，并重新设计代码，因为否则您将一直使用递归（memoryleak）。您应该使用if语句防止负不透明度，因为它会更改任何内容，并且只需要资源。谢谢！有没有一种方法可以在用户看不到的情况下记录不透明度，即0.8，但我们可以单独保存该数据？以下是我目前拥有的：我明白了。很好的实验！当然，您不必向用户显示值。您可以通过ajax将其发送到数据库。或者在localStorage中记录一系列值，然后将其作为文件下载。我想可能性是无穷的。谢谢！有没有一种方法可以在用户看不到的情况下记录不透明度，即0.8，但我们可以单独保存该数据？以下是我目前拥有的：我明白了。很好的实验！当然，您不必向用户显示值。你可以