2014-01-09 108 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,但沒有運氣,請參閱上文。 –