javascript - 在 Javascript 中双重触发引用 self 的函数

Question

我正在使用一个简单的脚本:

• 如果用户在 3 秒后尚未点击(使用 setTimeout)，则在 3 秒后显示一条消息，

• 那么如果用户在5秒内点击，那么该消息不应在定义的setTimeout内出现，

• 在上一次点击之后，如果用户 5 秒没有点击，那么用户将看到消息等等...

• 这就像一个循环。

我的脚本实际上可以工作，但我有一个问题，因为它似乎是“指数”双重触发。我认为我的错误是我如何创建这个“循环”并在其内部 self 引用 setTimerForMsg 。

这是一个演示:https://jsfiddle.net/3wm7z576/11/

这是代码:

html

<div id="zone">
  <span id="msg" class="displayNone">this is the messager</span>
</div>

js

setTimerForMsg(3000, 5000);

function setTimerForMsg(initial_timelaps, new_timelaps) {
      var timer = setTimeout(showMsg, initial_timelaps);
      $("#zone").on('click', function(e) {
        //if user clicks before msg appears (but after timer was initiated )
        clearTimeout(timer);
        //if user went beyond timer laps and msg already visible on Step (n)
        //remove it when move to Step (n+1)
        $('#msg').addClass('displayNone');
        console.log("message1");
        //loop the process for the next Step
        setTimerForMsg(new_timelaps, new_timelaps);
      });
    }
    function showMsg() {
      $('#msg').removeClass('displayNone');
      console.log('message2');
    }

这个问题很重要，因为虽然这个脚本很简单，但在我的真实应用程序中，它会执行其他可能耗尽浏览器性能的操作，因此我不能让它们执行 64 次!

您可以在演示的控制台中看到，每次我单击事件都会发生两次:2次，然后4次，然后8次，然后16次，然后32次，依此类推...

Answer 1

使用 $("#zone").off('click', ... 删除您之前添加的 eventListner。否则您只是添加越来越多的点击操作。

Documentation here