我不能让setInterval()在Javascript中工作

时间:2011-08-27 18:42:15

标签: javascript jquery setinterval

我有一个生成给定单词排列的算法。我正在尝试使用setInterval()生成下一个排列,但该函数只运行一次!我无法弄清楚为什么。我没有收到任何错误消息。 这是我的代码

var splitted;
var t;
 $(document).ready(function() {
$('#SubmitBtn').click(function() {
    //change Start to Stop and change button id
    $('#SubmitBtn').attr('id','StopBtn').attr('value','Stop');
    //and add click event to it
    $('#StopBtn').click(function() {
        clearInterval(t);
        $('#StopBtn').attr('value','Submit');
        $('StopBtn').attr('id','SubmitBtn');
    });
    if ($('#AnagramTxtArea').val().length>0)
            $('#AnagramTxtArea').text('');
    var inputTxt = $('#anagram').val();
    splitted = inputTxt.split("");
    splitted.sort(); //first sort the array in order to generate permutations
    $('#AnagramTxtArea').append(splitted.join("") + " ");
    t= setInterval(GeneratePermutation(),10);
});
 });

 var AnagramObj = new Anagram();
 function GeneratePermutation() {
        splitted = AnagramObj.NextPermutation(splitted);
        if (splitted!=null)
            $('#AnagramTxtArea').append(splitted.join("") + " ");       
        else  
            $('#StopBtn').click();

    }

和HTML:

<div id="content">
<input id="anagram" type="text" placeholder="Insert your text here" maxlength="80"/>                    <br />
<input id="SubmitBtn" type="submit" value="submit" />
<br />
<textarea id="AnagramTxtArea" readonly="readonly"></textarea>

</div> 

编辑: 然而,另一个问题是:

调用$('#StopBtn')时,click()代码在现有click事件函数后继续执行。所以我处在一个无限循环中。

3 个答案:

答案 0 :(得分:12)

您需要将函数对象本身传递给setInterval(),而不是调用函数的结果:

t = setInterval(GeneratePermutation,10);
                                // ^ No parentheses

编辑:关于第二个问题,您可以做的是检查间隔是否正在运行。如果是,则取消它:

var splitted;
var t;
$(document).ready(function() {
$('#SubmitBtn').click(function() {
    if (t !== undefined) { //interval is already running
        clearInterval(t);
        t = undefined;
        $('#SubmitBtn').attr('value','Submit');
    } else {
        //change Start to Stop
        $('#SubmitBtn').attr('value','Stop');
        if ($('#AnagramTxtArea').val().length>0)
                $('#AnagramTxtArea').text('');
        var inputTxt = $('#anagram').val();
        splitted = inputTxt.split("");
        splitted.sort(); //first sort the array in order to generate permutations
        $('#AnagramTxtArea').append(splitted.join("") + " ");
        t = setInterval(GeneratePermutation,10);
    }
});
});

答案 1 :(得分:4)

在这里,您实际上在调用setInterval()时执行GeneratePermutation()

t = setInterval(GeneratePermutation(),10);

您必须将函数传递给setInterval()。这样做:

t = setInterval(GeneratePermutation, 10);

答案 2 :(得分:3)

您必须传入函数名称或匿名函数作为setInterval的第一个参数。请参阅MDN参考https://developer.mozilla.org/en/window.setInterval

t = setInterval(GeneratePermutation,10);

t = setInterval(function() { /* code */ }, 10);

setInterval的正确语法:

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

,其中

  • intervalID是您可以传递给clearInterval()的唯一间隔ID。
  • func是您想要重复调用的函数。
  • 中的代码
  • 替代语法,是您要执行的一串代码 反复。 (建议不要使用此语法 使用eval())延迟的原因是毫秒数 (千分之一秒)setInterval()函数应该等待 每次调用func之前。与setTimeout一样,有一个最小值 延迟执行。

修改 假设您尝试点击一下,这可能是个问题。

function GeneratePermutation() {
        splitted = AnagramObj.NextPermutation(splitted);
        if (splitted!=null)
            $('#AnagramTxtArea').append(splitted.join("") + " ");       
        else  
            //$('#StopBtn').click();
            // should be
            $('#StopBtn').trigger('click');

    }