How to modify a global variable from a Scroll function?

Friends, I would like you to help me by guiding me, I need to modify a global variable at the moment of scrolling, to load data through Ajax.

The code that I wrote works the first time when the scroll reaches the end of the page, but then when I scroll again, it reaches the end and the same data is loaded infinitely. The code is as follows:

var flag_scroll;

            $(window).scroll(function(){    
                    if($(window).scrollTop() === $(document).height() - $(window).height()){
                            $('#ForLoadMore1').html("<div id='loadingDraw' style='width100%; height35px; display:flex; align-items:center; justify-content:center;'><img src='imagenes/loading.gif' style='width:135px; height:100px;'></div>");
                            setTimeout(function(){$('#loadingDraw').hide()}, 2000);
                            setTimeout(function(){
                                $.ajax({
                                    url:'loadMore.php',
                                    type:'GET',
                                    data:{
                                        'offset':flag_scroll,
                                        'limit':10
                                    },
                                    success:function(data){
                                        if(data != ""){
                                            $('#ForLoadMore1').append(data);
                                            flag_scroll =+ 10;
                                        } else {
                                            $('#ForLoadMore1').append("<p>No hay más noticias para mostrar!</p>");
                                        }
                                    }
                                });
                            }, 2000); 
                    }
            });

This is the PHP code:

<?php
//Crear Variables para conexion Noticias Principales
$host = "localhost";
$user = "********";
$pw = "******";
$dataBase1 = "kautivai_DatosDeNoticias";

if(isset($_GET['limit']) && isset($_GET['offset'])){
    $limit = $_GET['limit'];
    $offset = $_GET['offset'];

    $conexion = mysqli_connect($host, $user, $pw) or die("Problemas al conectar con base de datos 'kautivai_DatosDeNoticias'");
    mysqli_select_db($conexion, $dataBase1) or die("Problemas al conectar con base de datos 'kautivai_DatosDeNoticias'");

            $result = mysqli_query($conexion, "SELECT * FROM Noticia1 LIMIT {$limit} OFFSET {$offset}") or die("Error al realizar consulta: ".mysqli_error($conexion)); 

            while($final = mysqli_fetch_array($result)){ 

                echo "<div class=\"not7\"><div class=\"fotosMain3\" id=\"foto18\"><img src='".$final['RutaImagen']."' class='PORTADAS1'></div><div class=\"TextoDerecha\"><h3 id=\"Etiqueta16\" style=\"color: #10A2E5; font-family: 'Raleway', sans-serif; font-size: 12px; line-height: 10px; margin-top: 10px; margin-bottom: 10px;\">".$final['Etiqueta']."</h3><hr class=\"barrasNuevas\" size=\"1px\" width=\"100%\" noshade=\"noshade\" style=\"margin: 10px auto; opacity: 0.3;\"><h1 class=\"titulosMain3\" id=\"Titulo19\">".$final['Titulo']."</h1><h1 class=\"Subtitulos\" id=\"Subtitulo15\">".$final['Subtitulo']."</h1><p style=\"color: #2E2E2E; font-family: Arial; font-size: 11px; margin-top: 10px;\">Por: <span style=\"color: #1279a8;\">".$final['Autor']."<span style=\"color: #2E2E2E;\">|</span></span>&nbsp;<span>".$final['Fecha']."</span></p><p class=\"main3Textos\" id=\"main3Textos-12\">".substr($final['Texto'], 0, 300)."...</p></div></div>";

            }
        //}
}

?>

I have made the following modifications, recommended by colleagues who have answered my question, are the following:

1) Add the option     async: false, to the $ .ajax function.

2) Initialized the global variable flag_scroll:     var flag_scroll = 21; Because I need data to load from row 21 of the database table, since rows 1 - 20 load when the page starts.

3) Add an alert in the success to monitor the increment of the variable flag_scroll     alert (flag_scroll);

But I still do not get what I need, the updated code would be:     var flag_scroll = 21;

            $(window).scroll(function(){    
                    if($(window).scrollTop() === $(document).height() - $(window).height()){
                            $('#ForLoadMore1').html("<div id='loadingDraw' style='width100%; height35px; display:flex; align-items:center; justify-content:center;'><img src='imagenes/loading.gif' style='width:135px; height:100px;'></div>");
                            setTimeout(function(){$('#loadingDraw').hide()}, 2000);
                            setTimeout(function(){
                                $.ajax({
                                    async:false,
                                    url:'loadMore.php',
                                    type:'GET',
                                    data:{
                                        'offset':flag_scroll,
                                        'limit':10
                                    },
                                    success:function(data){
                                        if(data != ""){
                                            $('#ForLoadMore1').append(data);
                                            alert(flag_scroll);
                                            flag_scroll += 10;
                                        } else {
                                            $('#ForLoadMore1').append("<p>No hay más noticias para mostrar!</p>");
                                        }
                                    }
                                });
                            }, 2000); 
                    }
            });

I get the following error: When scrolling to the end of the page, the first alert appears with message "21", I click on accept, 10 data are loaded as expected. Scrolling again, the second alert appears with message "31" but when clicking OK, the third alert appears WITHOUT HAVING DONE scroll and shows me "41"

Could you help me find the error please?