我不能讓setInterval（）在Javascript中工作

Question

我有一個算法可以生成給定單詞的排列。我試圖使用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'）點擊（）代碼繼續在存在點擊事件功能後執行。所以我陷入了無限循環。

Answer 1

您需要的函數對象本身傳遞給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); 
    } 
}); 
}); 

Answer 2

在這裏，你實際上是在你打電話的setInterval（）時執行GeneratePermutation()：

t = setInterval(GeneratePermutation(),10); 

你必須給一個函數傳遞給setInterval（）。取而代之：

t = setInterval(GeneratePermutation, 10); 

Answer 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是一個唯一的間隔ID可以傳遞給clearInterval（ ）。
• func是你想重複調用的函數。代碼
• 備用語法，是您想要重複執行 的代碼的字符串。 （使用此語法不推薦與使用eval（））相同的 原因延遲是每次調用func之前setInterval（）函數應該等待 的毫秒數 （千分之一秒）。和setTimeout一樣，強制執行延遲的最小值爲 。

編輯： 這可能是一個問題，假設你想火點擊。

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

    }