在鼠标悬停时停止 setTimeout 引导模式答案

【问题标题】：Stop setTimeout bootstrap modal on mouse hover在鼠标悬停时停止 setTimeout 引导模式
【发布时间】：2019-06-02 13:07:59
【问题描述】：

我会问一些对我来说有点困难的事情，因为我对 JS/JQ 不是很擅长，

我使用 bootstrap 4 创建模态，并在后端添加 settimeout 以在 X 秒后关闭模态，

但是：

如果用户没有读完那个模式，这是我的主要目标????，

我想停止 settimeout 一旦 鼠标进入模态 并再次如果 mouse out side modal，settime out again 工作完成事件

我的代码：

$(function(){
    $('#mymodal').on('show.bs.modal', function(){
        var myModal = $(this);
        clearTimeout(myModal.data('hideInterval'));

        myModal.data('hideInterval', setTimeout(function(){
            myModal.modal('hide');
        }, 3000));
    });
});

很抱歉打扰你，但没有比你更好的了:) ????

【问题讨论】：

你可以看到这个帖子：stackoverflow.com/questions/12343695/…
@AleKennedy 感谢您的回复，但这不是我要找的，演示中的声音看起来像工具提示，我要查找的内容包括当鼠标在 settimeout STOP 中打开时我想要的模式，而不是当鼠标再次移出时 settimeout 工作以关闭模式:) 你可以将代码添加给我吗？？？？

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

使用 setInterval 增加不关心模式的时间：

let beforeClose;
let mouseIn=false;
const openModal = () => {
  document.querySelector('#modal').style.display='block';
  beforeClose = 100;
  let int = setInterval(() => {
    document.querySelector('#countdown').innerHTML = beforeClose;
    if (!mouseIn) beforeClose--;
    if (beforeClose==0) {
      closeModal()
      clearInterval(int);
    }
  }, 1000/24);
}
const closeModal = () => document.querySelector('#modal').style.display='none';

#modal {
  border: 1px solid black;
  display: none;
}

<button onclick="openModal()">Open modal</button>

<br>

<div id="modal" onmouseover="mouseIn=true" onmouseout="mouseIn=false">
  <p>
    Closing the modal at 0 : <span id="countdown"></span>
  </p>
  <p>
    Hover me to pause the countdown
  </p>
</div>

（我使用的是 div 而不是模态框，但实际上是一样的）

【讨论】：

我发誓你所做的正是我想要的，但我尝试添加你展示给我的内容，但没有工作，倒计时完成和模式关闭后出现问题尝试再点击一次，时间将重新开始（ -0 ， -1 ， -2 等。）在这里检查我的代码jsfiddle.net/dbawtgfh
编辑了 m 答案以纠正错误。如果这个答案很好，请点赞并接受！

【解决方案2】：

监控模态内容的鼠标悬停

$(function(){
    $('#mymodal').on('show.bs.modal', function(){
        var myModal = $(this);
        clearTimeout(myModal.data('hideInterval'));

        $('.modal-content', myModal).on('mouseover', function() {
            clearTimeout(myModal.data('hideInterval'));

        });

        $('.modal-content', myModal).on('mouseout', function() {
            myModal.data('hideInterval', setTimeout(function(){
                myModal.modal('hide');
            }, 3000));

        });

        myModal.data('hideInterval', setTimeout(function(){
            myModal.modal('hide');

        }, 3000));

    });

});

【讨论】：