2014-01-09 199 views
1

此代码显示来自php的解析数据问题是当我选择另一组解析的数据时,以前的数据未被清除。我试图清空var json但没有任何积极的结果。变量值未被清除

$(document).ready(function() { 
$(".chooseSub").on("click",function(event) { 
    event.preventDefault(); 
    var display = $(this).attr("title"); 
    var idx = 0; 
    $.post("includes/learnFunctions.php", { 
     learnThis:display 
    }, function(data) { 
     var json = $.parseJSON(data); 
     if (json == 0) { 
      $("#spanQ").html("Nothing to show!"); 
     } else { 
      workData(json, idx); 
     } 
    }); 
}); 

function workData(json, idx){ 
    function next() {    
     if (idx > (json.length - 1)) { 
      idx = 0; 
     } 
     console.log(idx+" next() start");   
     var text1 = json[idx].question; 
     var text2 = json[idx].answer; 
     $("#spanQ").html("<p>" + text1 + "</p>"); 
     $("#spanA").html("<p>" + text2 + "</p>"); 
     console.log(idx,text1,json); 
     console.log(json);   
     idx++; 
    } 
    $(".test").on("click",function(){ 
     next(); 
    }); 
} 

}); //doc ready 

这个问题可以在这里

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>test</title> 
    <script src="js/jquery-1.10.2.js"></script> 
<script> 
$(document).ready(function() { 
    function workData(custVar){ 
     var idx =0; 
     function again(){ 
      console.warn(custVar); 
      if (idx > (custVar.length - 1)) { 
       idx = 0; 
      }   
      var text1 = custVar[idx]; 
      $("#spanQ").html("<p>" + text1 + "</p>"); 
      console.log(idx,text1,custVar);   
      idx++; 
     } 
     $("#id4").on("click",function(){  
      again(); 
     }); 
    } 
    var customVar1 = ["green", "black", "red", "blue", "yellow"]; 
    var customVar2 = ["one","two", "three", "four", "five"]; 
    $("#id1").on("click", function(){ 
     workData(customVar1); 
    }); 
    $("#id2").on("click", function(){ 
     workData(customVar2); 
    }); 
}); //doc ready 
</script> 
</head> 
<body> 
    <div id="id1">Colors</div> 
    <br/> 
    <div id="id2">Numbers</div> 
    <br/> 
    <div id="id4">RUN</div> 
    <br /> 
    <span id="spanQ"></span>        
</div>       
</body> 
</html> 

模拟我已经试过几个不同的方法,但他们都不是工作的时间间隔的情况。

$(document).ready(function() { 
    var idx = 0; 
    function workData(custVar){  
     clearInterval(myInterval); 
     function again(){ 
      if (idx > (custVar.length - 1)) { 
       idx = 0; 
      }   
      text1 = custVar[idx]; 
      $("#spanQ").html("<p>" + text1 + "</p>"); 
      console.log(idx,text1,custVar); 
      idx++; 
     } 
     var myInterval = setInterval(again, 2000); 
    } 
    function manStep(custVar){ 
     if (idx > (custVar.length - 1)) { 
      idx = 0; 
     }   
     text1 = custVar[idx]; 
     $("#spanQ").html("<p>" + text1 + "</p>"); 
     console.log(idx,text1,custVar); 
     idx++; 
    }; 
    var customVar1 = ["green", "black", "red", "blue", "yellow"]; 
    var customVar2 = ["one","two", "three", "four", "five"]; 
    $("#id1").on("click", function(){ 
     workData(customVar1); 
    }); 
    $("#id2").on("click", function(){ 
     workData(customVar2); 
    }); 
    $("#id3").on("click", function(){ 
     clearInterval(interval); 
     var interval = setInterval(function(){manStep(customVar1);}, 2000); 
    }); 
    $("#id4").on("click", function(){ 
     clearInterval(interval); 
     var interval = setInterval(function(){manStep(customVar2);}, 2000); 
    }); 
}); //doc ready 
+1

您确定这不是缓存问题? – adeneo

+0

您是否测试了请求结果?用户在网络标签中使用Chrome浏览器,查看您的请求正在发送/接收。 – Ricbermo

+0

你可能有更多的“chooseSub”类的一个控件。请查看 –

回答

0

如果用$(".test").on("click", ...)添加事件处理程序,这不会导致要删除所有之前的处理器。相反,每次运行workData()时都会注册一个附加的动作来执行单击.test元素。这就是为什么你会看到与调用workData()一样多的日志输出。

要删除此问题,您应该在添加新事件之前删除任何现有的事件处理程序。 jQuery为此提供了off()功能:

var test = $(".test"); 
test.off("click"); 
test.on("click", ...); 
// or: test.off("click").on("click", ...) 
+0

谢谢,使用.on(“click”)时,它很好地工作,但如何通过setInterval(runFunction,timeOut)运行时如何解决同样的问题;那里没有处理程序只是功能? –

+0

'setInterval'返回一个ID,可以用'clearInterval'去除间隔回调。查看[MDN相关文档](https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval?redirectlocale=en-US&redirectslug=DOM%2Fwindow.setInterval)。 – denisw

+0

我已经测试了clearInterval,但没有运气,请参阅上文。 –