mouseup 上的 clearTimeout 不起作用

Question

我想点击一个点并删除它，但是当我按下鼠标按钮 3 秒钟时，我想用这个点做其他事情。 我的问题是，该代码不会清除计时器，它只会在 3 秒后删除该点，无论我在该点上单击多长时间。 我正在使用 setTimeout 和 clearTimeout。

    function click(event,d){
        timer= setTimeout(function(){
       /* do something */
    },3000)
        }
        function clickRelease(timer){
            clearTimeout(timer)
      }
      divMag1=d3.selectAll(".scatterlayer .trace .points path ")
      divMag1.on("mousedown", click)
      divMag1.on("mouseup",clickRelease)```

Answer 1

V3 - 我认为你在执行你想要的之前删除了目标。
请注意，执行 setTimout 可能需要 3 秒以上的时间。
尝试：

 function click(event) { const currentTarget = event.currentTarget; // for some reason event.target is null in the timer handler, this fixes it 🤷 const timer = setTimeout(() => { currentTarget.removeEventListener('mouseup', deleteTarget); console.log('stuff'); // do stuff }, 3000); function deleteTarget() { clearTimeout(timer); console.log('deleted'); currentTarget.removeEventListener('mouseup', deleteTarget); // not required if you're actually deleting the target // remove target } currentTarget.addEventListener('mouseup', deleteTarget); } document.querySelector('#but').addEventListener('mousedown', click)

 <button id="but">Click</button>

---

V1：

let timer;
function click(event,d){
    timer= setTimeout(function(){
       /* do something */
    },3000);
}
function clickRelease(){
    clearTimeout(timer)
}
divMag1=d3.selectAll(".scatterlayer .trace .points path ")
divMag1.on("mousedown", click)
divMag1.on("mouseup",clickRelease)

Answer 2

您应该首先声明timer变量。 然后要使您的mouseup事件起作用，您应该再次将clickRelease包装到事件函数中或简单地使用它：

...
.addEventListener("mouseup", function() { clearTimeout(timer) })

带按钮的工作示例：

 var timer function click(event, d) { timer = setTimeout(function () { console.log('do something') }, 1000) } function clickRelease(timer){ clearTimeout(timer) } var divMag1 = document.querySelector('#but') divMag1.addEventListener("mousedown", click) document.addEventListener("mouseup", function() { clickRelease(timer) })

 <button id="but">Click</button>

如果您希望事件在按钮按下时重复执行某些操作，则需要像这样使用setInterval而不是setTimeout ：

var timer
function click(event, d) {
    timer = setInterval(function () {
        console.log('do something')
    }, 1000)
}
var divMag1 = document.querySelector('#but')
divMag1.addEventListener("mousedown", click)
document.addEventListener("mouseup", function() { clearInterval(timer) })

注意清除间隔使用clearInterval而不是clearTimeout 。 此外，我的解决方案中的整个文档上附加的mouseup事件处理程序不在按钮上。