设置间隔ajax请求

Question

Hello guys i have a problem with SetInterval i've try using it like this to refresh my request but it's not working

setInterval(test, 10000);
$.get("https://ipinfo.io",
    function test(response) {
        console.log(response.ip, response.country);
        var body = document.getElementsByTagName('body')[0]
        var creatediv = function(s1, s2, s3, s4) {
            var div = document.createElement('div');
            div.appendChild(s1);
            div.appendChild(s2);
            return div;
        }
        var createspan = function(value) {
            var span = document.createElement('span');
            span.innerText = value;
            return span;
        }
        body.appendChild(creatediv(createspan('Your IP adress:  '), createspan(response.ip)))
        body.appendChild(creatediv(createspan('Your City:  '), createspan(response.city)))
        body.appendChild(creatediv(createspan('Country:  '), createspan(response.country)))
        body.appendChild(creatediv(createspan('Postal Code:  '), createspan(response.postal)))


    }, "jsonp")

Answer 1

You need to call $.get() inside your interval callback:

 setInterval(test, 1000); function test() { $.get("https://ipinfo.io", function test(response) { console.log(response.ip, response.country); var body = document.getElementsByTagName('body')[0] var creatediv = function(s1, s2, s3, s4) { var div = document.createElement('div'); div.appendChild(s1); div.appendChild(s2); return div; } var createspan = function(value) { var span = document.createElement('span'); span.innerText = value; return span; } body.appendChild(creatediv(createspan('Your IP adress: '), createspan(response.ip))) body.appendChild(creatediv(createspan('Your City: '), createspan(response.city))) body.appendChild(creatediv(createspan('Country: '), createspan(response.country))) body.appendChild(creatediv(createspan('Postal Code: '), createspan(response.postal))) }, "jsonp"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

The first issue you have is that your refresh will never refresh. Presumably, you want to fetch the latest data from ipinfo every second, then update your display to show that information.
The test() function as it's set up contains only the logic needed to update the display - not to fetch data.

The next issue is that he test() function you're trying to call in setInterval is created as a closure function, which isn't available in the global scope.
You can define test() on its own to correct this.

Combining those two fixes will allow setInterval to call the server and manipulate the page.

function test() {
    $.get("https://ipinfo.io",
        function (response) {
            console.log(response.ip, response.country);
            var body = document.getElementsByTagName('body')[0]
            var creatediv = function(s1, s2, s3, s4) {
                var div = document.createElement('div');
                div.appendChild(s1);
                div.appendChild(s2);
                return div;
            }
            var createspan = function(value) {
                var span = document.createElement('span');
                span.innerText = value;
                return span;
            }
            body.appendChild(creatediv(createspan('Your IP adress:  '), createspan(response.ip)))
            body.appendChild(creatediv(createspan('Your City:  '), createspan(response.city)))
            body.appendChild(creatediv(createspan('Country:  '), createspan(response.country)))
            body.appendChild(creatediv(createspan('Postal Code:  '), createspan(response.postal)))
        }, "jsonp")
}