clearInterval（）无法正常工作

时间：2014-12-26 22:14:26

标签： javascript jquery ajax timer

我最近一直试图每两秒重复一次jQuery AJAX请求。请注意：我已经查看过关于SO的其他问题而不是它们似乎适用于我的情况，我也查看了文档。

段：

else if (text == "load") {
        $(".response").text("working!");

        var traffic = function load() {
            $.ajax({url:"load.php",success:function(result){
                var obj = jQuery.parseJSON(result);
                var ids = obj.map(function(el) {
                    return "<tr><td>" + el.id + "</td><td>" + el.ip + "</td><td>" + el.proxyip + "</td><td>" + el.ping + "</td><td>" + el.time + "</td></tr>";
                });

                $(".response").html("<table><tr><td><strong>ID</strong></td><td><strong>IPs</strong></td><td><strong>Proxy IP</strong></td><td><strong>Ping</strong></td><td><strong>Time</strong></td></tr>" + ids + "</table>");
            }});
        };

        var trafficInterval = setInterval(traffic, 2000);

要判断超时，我检查文本是否等于＆＃34;加载＆＃34;，如果它不等于加载，我可以暂停超时

else {
        $(".response").text("'" + badCommand + "'" +" is not a valid command, type 'help' for a list of commands.");
        clearInterval(trafficInterval);
    }

但是，当我更改文本字段的输入时，表格仍然会每两秒加载一次，超时也没有被记录，我似乎无法理解原因。

这里是人们想知道的全部功能

$("textarea").keyup(function(){
var text = $(this).val();
$(".log").text(text);

// Commands
if (text != "") {
    var badCommand = $("textarea").val();

    if (text == "help") {
        $(".response").html("Commands:<br/><span class='indent'>traffic -url|all</span><span class='indent'>google #search term</span><span class='indent'>youtube #search term</span><span class='indent'>portfolio</span>")
    } else if (text == "traffic") {
        $(".response").html('Live traffic from:<br/><table><tr><td><strong>IP</strong></td><td><strong>Proxy IP</strong></td><td><strong>Ping</strong></td><td><strong>Time</strong></td></tr><?php try { $db = new PDO("mysql:host=$mysql_host;dbname=$mysql_db", $mysql_user, $mysql_pass); $sql = "SELECT * FROM traffic ORDER BY id DESC LIMIT 50"; foreach ($db->query($sql) as $row) { echo "<tr>"; echo "<td class='details'>" . $row["ip"] . "</td>"; echo "<td class='details'>" . $row["proxyip"] . "</td>"; echo "<td class='details'>" . $row["ping"] . "</td>"; echo "<td class='details'>" . $row["time"] . "</td>"; echo "</tr>"; } $db = null; } catch(PDOException $e) { $e->getMessage(); } ?></tr></table>');
    } else if (text == "load") {
        $(".response").text("working!");

        var traffic = function load() {
            $.ajax({url:"load.php",success:function(result){
                var obj = jQuery.parseJSON(result);
                var ids = obj.map(function(el) {
                    return "<tr><td>" + el.id + "</td><td>" + el.ip + "</td><td>" + el.proxyip + "</td><td>" + el.ping + "</td><td>" + el.time + "</td></tr>";
                });

                $(".response").html("<table><tr><td><strong>ID</strong></td><td><strong>IPs</strong></td><td><strong>Proxy IP</strong></td><td><strong>Ping</strong></td><td><strong>Time</strong></td></tr>" + ids + "</table>");
            }});
        };

        var trafficInterval = setInterval(traffic, 2000);

    } else {
        $(".response").text("'" + badCommand + "'" +" is not a valid command, type 'help' for a list of commands.");
        clearInterval(trafficInterval);
    }
}

if (text == "") {
    var noCommand = $("textarea").val();
    $(".response").text(" ");
}

// End Commands

}）;

仅供参考：

放入clearInterval（）;代码停止工作后，
把clearInterval（）;在代码什么都不做之前。

clearInterval（trafficInterval）;必须工作，因为如果我把它放在第一个函数的末尾，当我输入＆＃34; load＆＃34;

时没有任何反应

它也不是计时器，我试着反而在鼠标移动时自动更新并发生完全相同的事情......

4 个答案:

答案 0 :(得分：1)

这是一个范围问题。间隔需要超出事件处理程序调用的范围：

var trafficInterval = null;
$("textarea").keyup(function(){
var text = $(this).val();
$(".log").text(text);

// Commands
if (text != "") {
    var badCommand = $("textarea").val();

    if (text == "help") {
        $(".response").html("Commands:<br/><span class='indent'>traffic -url|all</span><span class='indent'>google #search term</span><span class='indent'>youtube #search term</span><span class='indent'>portfolio</span>")
    } else if (text == "traffic") {
        $(".response").html('');
    } else if (text == "load") {
        $(".response").text("working!");

        var traffic = function load() {
            $.ajax({url:"load.php",success:function(result){
                var obj = jQuery.parseJSON(result);
                var ids = obj.map(function(el) {
                    return "<tr><td>" + el.id + "</td><td>" + el.ip + "</td><td>" + el.proxyip + "</td><td>" + el.ping + "</td><td>" + el.time + "</td></tr>";
                });

                $(".response").html("<table><tr><td><strong>ID</strong></td><td><strong>IPs</strong></td><td><strong>Proxy IP</strong></td><td><strong>Ping</strong></td><td><strong>Time</strong></td></tr>" + ids + "</table>");
            }});
        };

        trafficInterval = setInterval(traffic, 2000);

    } else {
        $(".response").text("'" + badCommand + "'" +" is not a valid command, type 'help' for a list of commands.");
        clearInterval(trafficInterval);
    }
}

if (text == "") {
    var noCommand = $("textarea").val();
    $(".response").text(" ");
}

// End Commands
});

请参阅小提琴@ http://jsfiddle.net/sLooj4on/（可以看到开发工具中的轮询失败，从输入中删除文本时停止）​​

答案 1 :(得分：0)

在不查看其余代码的情况下很难分辨，但您的trafficInterval变量可能超出范围。尝试在if / else语句之外初始化

答案 2 :(得分：0)

trafficInterval仅在if语句中定义。您试图在错误的范围内清除它。我在这里仍然缺乏一些背景，但你可以试试这个：

＆＃13;
＆＃13; 
var trafficInterval;
$("textarea").keyup(function() {
      var text = $(this).val();
      $(".log").text(text);

      // Commands
      if (text != "") {
        var badCommand = $("textarea").val();

        if (text == "help") {
          $(".response").html("Commands:<br/><span class='indent'>traffic -url|all</span><span class='indent'>google #search term</span><span class='indent'>youtube #search term</span><span class='indent'>portfolio</span>")
        } else if (text == "traffic") {
          $(".response").html('Live traffic from:<br/><table><tr><td><strong>IP</strong></td><td><strong>Proxy IP</strong></td><td><strong>Ping</strong></td><td><strong>Time</strong></td></tr><?php try { $db = new PDO("mysql:host=$mysql_host;dbname=$mysql_db", $mysql_user, $mysql_pass); $sql = "SELECT * FROM traffic ORDER BY id DESC LIMIT 50"; foreach ($db->query($sql) as $row) { echo "<tr>"; echo "<td class='
            details '>" . $row["ip"] . "</td>"; echo "<td class='
            details '>" . $row["proxyip"] . "</td>"; echo "<td class='
            details '>" . $row["ping"] . "</td>"; echo "<td class='
            details '>" . $row["time"] . "</td>"; echo "</tr>"; } $db = null; } catch(PDOException $e) { $e->getMessage(); } ?></tr></table>');
        } else if (text == "load") {
          $(".response").text("working!");

          var traffic = function load() {
            $.ajax({
              url: "load.php",
              success: function(result) {
                var obj = jQuery.parseJSON(result);
                var ids = obj.map(function(el) {
                  return "<tr><td>" + el.id + "</td><td>" + el.ip + "</td><td>" + el.proxyip + "</td><td>" + el.ping + "</td><td>" + el.time + "</td></tr>";
                });

                $(".response").html("<table><tr><td><strong>ID</strong></td><td><strong>IPs</strong></td><td><strong>Proxy IP</strong></td><td><strong>Ping</strong></td><td><strong>Time</strong></td></tr>" + ids + "</table>");
              }
            });
          };

          trafficInterval = setInterval(traffic, 2000);

        } else {
          $(".response").text("'" + badCommand + "'" + " is not a valid command, type 'help' for a list of commands.");
          clearInterval(trafficInterval);
        }
      }

      if (text == "") {
        var noCommand = $("textarea").val();
        $(".response").text(" ");
      }

      // End Commands
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

移动变量声明

var trafficInterval = null;
keyup eventhandler之前的

（将其移动到外部范围）。看到工作，在这里剥离示例：

http://jsbin.com/yitiquwoce/1/

相关问题
最新问题