javascript - 如何使用 setInterval() 作为事件监听器

Question

我从未使用过setInterval()，我需要一些建议，因为我无法理解这个问题。我想创建某种事件监听器。

例如，我想检查“选择菜单”中选项的长度，但是第三方脚本通过 Ajax 请求填充“选择菜单”的内容。不幸的是，我不允许接触第三方脚本，所以我考虑有一个函数来等待和监听要添加的内容，然后可以执行它的任务。

假设我的网页上有以下内容:

<select size="7" id="cat"> </select>

onload 充满了这样的选项:

<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
<option value="Category 3">Category 3</option>
<option value="Category 4">Category 4</option>

我打算添加一个函数，该函数还加载 onLoad (确切地说是 $(document).ready() )，该函数将监听选项的长度，如果大于零，我们希望执行某些操作(在此警报示例)

function checkLen(){

    if($('#cat option').size() > 0){
        return true;
       }else{
        return false;
       }

}


function takeDefault(){

    var ourInterval = setInterval("checkLen();", 1000);

       if(ourInterval == true){
           alert("Okay I will do something now");
           clearInterval(ourInterval);

       }

        // Now I will perform some other tasks
}

$(document).ready(function() {
   takeDefault();
});

现在这不起作用，因为我不太明白。 if(checkLen == True) 条件仅执行一次，我需要每秒执行一次，直到填充选择菜单。

Answer 1

为了简单起见，我使用了不同的元素，但想法仍然相同:

var listen = setInterval(function () {
    if ($('input').val().length > 0) {
        console.log('has changed, should call callback');
        clearInterval(listen);
    }
}, 1000);​

http://jsfiddle.net/suKCp/

对于您的情况，这应该类似于(未经测试):

function takeDefault(){
  var ourInterval = setInterval(function () {
    if ($('#cat option').size() > 0) {
      alert("Okay I will do something now");
      clearInterval(ourInterval);
    }
  }, 1000);

  // Now I will perform some other tasks
}