Question

当鼠标指针悬停在图像上时，我有一个在每次鼠标按下事件时触发的功能。现在，我在这个鼠标按下功能中调用两个函数。

我每次都需要调用一个函数Triangulate()，而上一次只需调用另一个函数ImageCalculation()。

此处最后一次仅表示连续img_mouse_down()函数调用之间应存在最小3秒或更长的间隔。

以下是我的代码：

function img_mouse_down(){
  if(leftMouseButton){
    Triangulate(); //Call this function every time.
    ImageCalculation(); //Call this function only the last time
  }
}

如果我连续点击图片5次然后暂停3秒或更长时间，Triangulate()应该被调用5次而ImageCalculation()应该只被调用一次。

如何实现这一目标？

Answer 1

var glob_timeout_holder;
function img_mouse_down(){
  if(leftMouseButton){
    Triangulate(); //Call this function every time.

    clearTimeout(glob_timeout_holder); //clear if any previous continuing timeouts

    glob_timeout_holder = setTimeout(ImageCalculationlast, 3000);
  }
}

据我所知，这可能会对你有所帮助。每次img_mouse_down（）运行时，它都会设置一个超时来执行ImageCalculation（），但在此之前杀死任何以前的timeOuts，结果是，如果用户停止点击，ImageCalculation（）将在最后一次点击后3秒被调用一次。

Answer 2

这样的事情可以解决你的问题。每次调用都会清除超时，否则会在3秒后触发ImageCalculation。

var timer = null
function img_mouse_down () {
    if(leftMouseButton){
    Triangulate();
    if (timer !== null) {
        clearTimeout(timer)
    }
    timer = setTimeout(function () {
        ImageCalculation()
    }, 3000)
  }
}

在连续触发的功能内仅触发一次功能

2 个答案: