事件侦听器内的函数仅在其初始化时触发

Question

 var init = true; $('#btn').on('click', delay(function() { $('#text').append('click'); init = false; }, 100)); function delay(fn, ms, enabled = true) { $('#text').append(init); // if(init) disable delay let timer = 0; return function(...args) { clearTimeout(timer); timer = setTimeout(fn.bind(this, ...args), ms || 0); } }

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <button id='btn'> TRIGGER </button> <div id="text"></div>

Init is a global variable which is meant to be used inside delay function to disable delay (init true/false) only on event listener initialisation.

The problem is that the delay function is triggered only once and ignores the change (to false) of the init variable.

For example, try clicking the trigger button. The init variable value is printed only for the first time.

Answer 1

You are calling the delay function in a wrong way in the click handler. You have to call it like so:

$('#btn').on('click', function () {

    delay(function() {

        $('#text').append('click');
        init = false;

    }, 100);
});

Answer 2

You will have to check for the value of init inside the function, like this:

$('#btn').on('click', delay(function() {

if(init) {
  $('#text').append('click');
  init = false;
  }

}, 100));

Answer 3

At the moment I don't know why append is not working but with a little workaround you can obtain what you want. Concatenate the original text and the actual one and use text() to set it again:

 var init = true; $('#btn').on('click', function() { $('#text').text(init); setTimeout(myDelay, 5000); }); function myDelay() { let originalText = $('#text').text(); init = false; console.log("init is false"); console.log("original text displayed: " + originalText); $('#text').text(originalText + " " + init); }

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <button id='btn'> TRIGGER </button> <div id="text"></div>