DWQA QuestionsCategory: ProgramClick on the hyperlink to execute a function in the backend?
KKK777 asked 1 month ago

My hyperlink code is as follows

<a href="localhost/question/full/4" ></a>

Before going to the localhost / question / full / 4 page, I hope to execute a function in the background. At present, my idea is to execute a function after clicking, which uses Ajax to execute the function in the background.
Question: is this the best way? Will the Ajax function take too long to execute and affect the subsequent page loading?

Gao Haifeng Ym replied 1 month ago

What is the purpose of performing background functions? What is the relationship between background functions and your page load It’s better to describe it than to analyze it

2 Answers
An solid answered 1 month ago

An Ajax request is usually not very long, it should have no impact.
Unless you change to execute the function in the background at the beginning of the page localhost / question / full / 4, no optimization can be faster than the Ajax request.

An solid replied 1 month ago

I think it’s more logical to click on the link, go directly to the URL that can be marked as read, and then it will return a redirection, so that the web page can jump to the final page you want to enter.

Sha Wu answered 1 month ago

Take a look at your “mark read” requirement. There are two principles for this unimportant “finishing work”:

  1. If it can be delayed, it will be delayed.
  2. Asynchrony means asynchrony.

Because if the network does not give the user power, if you set the mark in advance, and then the web page will not load, then the user will not be able to see the new message.
If the tag has been read, it must be read. That is to say, make sure that the dom of the page reading the new message is loaded before labeling.
So my advice is:

  1. Do not mark the read in advance, or use JavaScript, but directly link, first load the page reading the new message directly.
  2. In the web page reading the new message, use JavaScript to confirm that the dom of the new page is loaded, and then asynchronously request the URL of the “mark read” function.

This is quite convenient to implement with jQuery:

$(function() {
    $.get("http://example.com/behaviors/markallread");
});

Or you can cooperate with the front desk CSS to make it more luxurious. For example, after the asynchronous request is successful, remove the unread quantity (so that the unread quantity will remain the same when the user enters the web page, but later it will become 0 all read):

$(function() {
    $("#unreadbtn").addClass("loading");
    $.ajax({
        url: "http://example.com/behaviors/markallread", 
        timeout: 10000
    })
    .done(function() {
        $("#unreadbtn").removeClass("has_unread");
        $("#unreadbtn .unreadcount").remove();
    })
    .fail(function() {
        $("#unreadbtn").addClass("ajaxerror");
        $("#unreadbtn").addClass("exclamation");
    })
    .always(function() {
        $("#unreadbtn").removeClass("loading");
    });
}

You can even try adding a timeout retry.