JavaScript (jquery) uses functions to modify the code of global variables_javascript skills

I store the current page in a global variable. At the same time, click the method in the "Last Page" link to call a function to automatically change the page number to the last page, and then call the method to load comments.
But I found that the system did not respond when I clicked "Last Page" for the first time, and the information on the last page was captured when I clicked it again!
To say that the global variable has not changed, it should have been changed, just like the method of loading comments becomes invalid after changing the page number.
The code is as follows:

Copy code The code is as follows:

var page = 1; / /Initialize the page number to the first page
var str = "";
$(document).ready(function() {
lostguest(); //Method to load comments
$( "a#first").click(function() {
page = 1;
lostguest();
});
$("a#last").click(function() {
if (page > 1) {
--page;
lostguest();
}
else {
page = 1;
alert("Already The first page! ")
}
})
$("a#next").click(function() {
if (page < pagecount) {
page;
lostguest();
}
else {
alert("It’s the last page!");
}
})
$("a#all ").click(function() {
getpagecount();
lostguest();
});
})
var getpagecount = function() {
var type = "GetPageCount";
$.ajax({
url: 'GetCount.ashx?type=' type,
type: "GET",
dataType: 'text',
beforeSend: function() {
},
error: function() {
alert('Failed to obtain the number of system log records');
},
success: function(count) {
pages = Number(count);
}
})
}
var lostguest = function() {
$.ajax({
url: 'SqlHelper.ashx?page =' page,
type: "GET",
dataType: 'json',
beforeSend: function() {
$("#loading").show();
} ,
error: function() {
alert('Failed to obtain system log');
},
success: function(msg) {
$("#guest").empty ();
if (msg != "0") {
var data = msg.log;
str = "";
$.each(data, function(i, n) {
str = "<p id='xuhao'>Serial number:" n.Serial number"Published date" n.Date"Username:" n.Operator"</p>";
str = "<p id='content'>Content:" n.Event"</p>";
});
$("#guest").append(str);
$("#loading").hide();
}
else {
alert("0");
}
}
})
}

I don’t know what’s going on? Can you experts explain it? ?
PS: Later I found a workaround to achieve this effect. The code is as follows:

Copy code The code is as follows:

var page = 1;
var str = "";
var pagecount; //Storage the total number of pages
$(document).ready(function() {
getpagecount(); //Method to get the total number of pages
lostguest ();
$("a#first").click(function() {
page = 1;
lostguest();
});
$("a#last ").click(function() {
if (page > 1) {
--page;
lostguest();
}
else {
page = 1;
alert("Already the first page!")
}
})
$("a#next").click(function() {
if (page < pagecount) {
page;
lostguest();
}
else {
alert("It’s the last page!");
}
})
$("a#all").click(function() {
page = pagecount; //Update the current page number to the total number of pages
lostguest();
});
})
var getpagecount = function() {
var type = "GetPageCount";
$.ajax({
url: 'GetCount.ashx?type=' type,
type: "GET",
dataType: 'text',
beforeSend: function() {
},
error: function() {
alert('Failed to obtain the number of system log records') ;
},
success: function(count) {
pagecount = Number(count); //Total number of pages read
}
})
}
var lostguest = function() {
$.ajax({
url: 'SqlHelper.ashx?page=' page,
type: "GET",
dataType: 'json',
beforeSend: function() {
$("#loading").show();
},
error: function() {
alert('Failed to obtain system log');
},
success: function(msg) {
$("#guest").empty();
if (msg != "0") {
var data = msg.log ;
str = "";
$.each(data, function(i, n) {
str = "<p id='xuhao'> Serial number: " n. Serial number" Publication date "n.Date" Username: "n.Operator"</p>";
str = "<p id='content'>Content: "n.Event"</p>" ;
});
$("#guest").append(str);
$("#loading").hide();
}
else {
alert("0");
}
}
})
}

Can any experts explain the problem with the first code? ? Thanks!