How to clear previous cache variable during Ajax call when sending variable in PHP

Question

I cannot stop the previous loading of a variable during an ajax call.

Please find onclick. I pass a variable and send the value to an ajax call to a PHP script.

I have data:

rnc.csv

DLRNC01
DLRNC02
DLRNC03
DLRNC04
DLRNC05
DLRNC06
DLRNC07
DLRNC08
DLRNC09
DLRNC10
DLRNC11
DLRNC12
DLRNC13
DLRNC14

the code

<?php

    if (($handle = fopen("rnc.csv", "r")) !== FALSE) {
        $i=0;
        $values=array();
        while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {

?>

<a href="javascript:void(0)"  onclick="pop(<?php echo "'".$data[0]."'"; ?>)" > <?php echo $data[0]; ?></a></br>
<?php               
    }
    fclose($handle);
    }
    else{
        echo "File not found";
    }
?>

<div id="container1"></div>

<script>

//even I cleared the chache using the cache:false

//for every click different variable is passing to the ajax call and than to PHP 
        function pop(rnc)
        {
            $.ajax({
            url: 'ajax1.php',
            type: "POST",
            cache: false,
            //dataType:'json',
            data:{rnc:rnc},
            success: function(data){

                        $("#container1").html(data);

                        setInterval(function(){

                                console.log(rnc);

                                $("#container1").html(data);

                        },2000);
                }
            });
        }

</script>

ajax1.php

<?php echo $_POST['rnc']; ?>

When I pass the value of rnc_value.php, after clicking on the values ​​of the file two more than the ajax call, it repeats that ever the values ​​having the previous call are displayed every 5 seconds.

When I do console.log in the browser:

ajax.php:344 DLRNC01
ajax.php:344 DLRNC05
ajax.php:344 DLRNC07
ajax.php:344 DLRNC04
ajax.php:344 DLRNC01
ajax.php:344 DLRNC02
2 ajax.php:344 DLRNC05
ajax.php:344 DLRNC06
ajax.php:344 DLRNC07
ajax.php:344 DLRNC04
ajax.php:344 DLRNC01
ajax.php:344 DLRNC02

Please help me with the solution.

Answer 1

Well, since our comments go a little long, I will transfer them to the response window. So, here you are now ...

function pop(rnc) {
    $.ajax({
        url: 'ajax1.php',
        type: "POST",
        cache: false,
        data:{rnc:rnc},
        success: function(data){
            $("#container1").html(data);

            setInterval(function() {
                console.log(rnc);
                $("#container1").html(data);
            },2000);
        }
    });
}

I suggest:

//storage for the interval that will persist beyond the function call
var popInterval = null;
function pop(rnc) {
    //if it is not the first invocation of pop, need to kill the previous interval
    if (popInterval !== null) {
        clearInterval(popInterval);
    }

    //start the new interval with the new 'rnc' data provided and store the interval reference
    popInterval = setInterval(function() {
        $.ajax({
            url: 'ajax1.php',
            type: "POST",
            cache: false,
            data:{rnc:rnc},
            success: function(data){
                console.log(rnc);
                $("#container1").html(data);
            }
        });
    },2000);
}