Question

我在Javascript中有一个递归类型函数，运行方式如下：

function loadThumb(thumb) {
    rotate=setTimeout(function() {
        loadThumb(next);
    }, delay);
}

注意：我已经简化了这个功能，使其更容易阅读。

我有一个像这样的“a”标签

<a href="#" onclick="loadThumb(3); clearTimeout(rotate);">Load thumb 3</a>

然而，他们没有清除计时器，计时器继续循环执行该功能，而不管被调用clearTimeout()。

任何想法为什么？我认为它可能与范围问题或类似问题有关。

Answer 1

是的，你需要使一个全局变量旋转。只需在函数之外声明它：

var rotate;
var delay = 1000;

function loadThumb(thumb) {
    alert("loading thumb: " + thumb);
    rotate = setTimeout(function() {
        loadThumb(thumb + 1);
    }, delay);
}

此外，您需要确保在调用loadThumb之前清除超时。否则你将清除你刚开始的计时器。

<a href="#" onclick="clearTimeout(rotate); loadThumb(3);">Load thumb 3</a>

小提琴：http://jsfiddle.net/63FUD/

Answer 2

这可能是范围问题，因此将旋转为全局变量并调用clearTimeout(rotate);

参考clearTimeout() example

Answer 3

如果您未在外部声明rotate，则可能是一个范围问题。

试试这个：

var rotate = 0;
function loadThumb(thumb) {

    rotate=setTimeout(function() {
        loadThumb(next);
    }, delay);

}

Answer 4

在链接上返回false

由于您没有使用var rotate，因此不应该是一个范围问题，因为旋转将在窗口范围内。你能展示完整的代码吗？

内联脚本被认为是不良编码 - 您应该附加页面的事件处理程序

此外，您不应该在可能为一个图像调用的函数中包含setTimeout

试试这个：

var rotate,next=1;
function loadThumb(thumb) {
  if (thumb) ... use thumb
  else ... use next
}

function slide() {
    rotate=setInterval(function() {
        loadThumb();
        next++; 
        if (next>=images.length) next=0;
    }, delay);
}

window.onload=function() {
  var links = document.getElementsByTagName("a");
  if (links[i].className==="thumbLink") {
    links[i].onclick=function() {
      var idx = this.id.replace("link","");
      loadThumb(idx);
      clearInterval(rotate);
      return false;
    }
  }
  document.getElementById("start").onclick=function() {
    slide();
    return false;
  }
  document.getElementById("stop").onclick=function() {
    clearInterval(rotate);
    return false;
  }
  slide();
}

假设

<a href="#" id="start">Start</a>
<a href="#" id="stop">Stop</a>

<a href="#" id="link0" class="thumbLink">Show 1</a>
<a href="#" id="link1" class="thumbLink">Show 2</a>
<a href="#" id="link2" class="thumbLink">Show 3</a>

Answer 5

我不确定你到底在做什么，因为据我所知你没有发布所有代码，但这看起来对我来说更好：

function loadThumb(thumb) {

    return setTimeout(function() {
        loadThumb(next);
    }, delay);

}

然后：

<a href="#" onclick="clearTimeout(loadThumb(3));">Load thumb 3</a>

Answer 6

如果必须管理多个超时，则可以使用全局范围内的对象和一些自定义方法来创建和删除超时。要访问这些方法，您可以将调用放在链接的onclick处理程序中（如示例中所示），也可以使用类似jQuery的库来绑定它们。

<script type="text/javascript">
    var timeouts = timeouts || {};

    function createTimeout(name, milliseconds, callback) {
        timeouts.name = setTimeout(callback, milliseconds);
    }

    function removeTimeout(name) {
        if (typeof(timeouts.name) !== undefined) {
            clearTimeout(timeouts.name);
            timeouts.name = undefined;
        }
    }

    createTimeout('foo', 5000, function() {
        alert('timeout')
    });
</script>

我还在jsFiddle http://jsfiddle.net/AGpzs/

上发布了一个例子

如何清除函数中设置的javascript超时

6 个答案: