让 Javascript 中只存在一个相同函数的实例

Let only one instance of the same function exists in Javascript

我在 ul 中的 li 项目上有这个 onclick 事件侦听器,它启动了 setInterval 函数,问题是如果我点击第二个 li 项目的另一个实例相同的间隔函数开始,前一个继续运行。 我怎样才能 "delete" 上一个而只让最后一个 "exists"?

我找到的类似问题的解决方案对我不起作用。

代码如下:

document.addEventListener('click', function (event) {

  var texta = document.getElementById('myTextarea');

   var item = event.target.closest('#yourlists li');
   if (item) {
    var ite = event.target.closest('#yourlists li').innerHTML;

    setInterval(function autoSave(){
          var listText = texta.value.split('\n');
          localStorage.setItem(ite, JSON.stringify(listText));
    }, 5000);

   }
});

setInterval() returns 一个您可以用来稍后停止它的 ID...

var intervalId = 0;

document.addEventListener('click', function (event) {

    var texta = document.getElementById('myTextarea');

    var item = event.target.closest('#yourlists li');

    if (item) {
        var ite = event.target.closest('#yourlists li').innerHTML;

        // clear any existing interval handler
        clearInterval(intervalId);

        // create a new one
        intervalId = setInterval(function autoSave(){
            var listText = texta.value.split('\n');
            localStorage.setItem(ite, JSON.stringify(listText));
        }, 5000);
    }
});

setInterval 函数 returns 一个可以用来停止该间隔的 ID。

这是一个例子:

var intervalID
document.addEventListener('click', function (event) {
    ....
    clearInterval(intervalID)
    intervalID = setInterval(function autoSave(){
         ....
    }, 5000);
    ....
})

使用clearInterval。来自文档,

The clearInterval() method of the WindowOrWorkerGlobalScope mixin cancels a timed, repeating action which was previously established by a call to setInterval().

var myInterval;

document.addEventListener('click', function (event) {
     // ... code
    clearInterval(myInterval);
    myInterval = setInterval(function autoSave(){
      // ... code
    }, 5000);
    // ... code
});