Web Front-end
JS Tutorial
Browser suspended animation during ajax synchronization operation (detailed tutorial)
Browser suspended animation during ajax synchronization operation (detailed tutorial)
Below I will share with you an article that solves the problem of browser suspended animation caused by js ajax synchronization request. It has a good reference value and I hope it will be helpful to everyone.
1. The cause of the problem
#I encountered a situation when I made a request today, that is, there is a function in the user's personal center. Click the button. You can refresh the user's current points. This definitely requires the use of ajax synchronization requests. At that time, I wrote and played with three, five, and two. The approximate code is as follows:
/**
* 异步当前用户积分 by zgw 20161216
* @return {[type]} [description]
*/
function flushIntegralSum() {
//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
$("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>');
$.ajax({
url:'URL',
type:'post',
async:false,
// data:{},
success:function(json){
json = eval('('+json+')');
if(json.url){window.location.href=json.url;return;}
$("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>');
if(json.code!=1){
alert(json.msg);
}else{
$("#free_sum").html(json.free_sum);
}
return;
}
});
}I thought such a simple function was Just write it and it will be fine. However, a problem occurred during operation. When the user clicked the refresh points button, the copy was not changed to "Refreshing", but the ajax request was sent. So I checked the web page code and found that js actually changed the copy. The onclick event bound to the html element was removed and changed back to the original after the request was successful, but the copy on the page did not change. It was strange at the time. I don’t know why the html code changed but the page did not change.
2. Understand the cause of the problem
The root of the problem: I conducted a troubleshooting at that time, and finally found that it was an "async:false" problem, and replaced it with There is no problem if it is asynchronous, so why does synchronous request cause code failure?
Reason: The browser's rendering (UI) thread and js thread are mutually exclusive. When executing js time-consuming operations, page rendering will be blocked. There is no problem when we execute asynchronous ajax, but when set to a synchronous request, other actions (the code behind the ajax function, and the rendering thread) will stop. Even if my DOM operation statement is in the sentence before the request is initiated, this synchronization request will "quickly" block the UI thread without giving it time to execute. This is why the code fails.
3. Solve the problem
1. I used setTimeout to solve the problem, put the ajax code in sestTimeout and let the browser restart One thread to operate, this solves the problem, the code is as follows:
function flushIntegralSum() {
//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
$("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>');
setTimeout(function(){
$.ajax({
url:'URL',
type:'post',
async:false,
// data:{},
success:function(json){
json = eval('('+json+')');
if(json.url){window.location.href=json.url;return;}
$("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>');
if(json.code!=1){
alert(json.msg);
}else{
$("#free_sum").html(json.free_sum);
}
return;
}
});
},0)
}The second parameter of setTimeout is set to 0, and the browser will execute it after a set minimum time
The problem is solved here, but you can try it. If you need to pop up a gif picture when you click the button, and the picture keeps rotating, it will prompt that the picture is being updated. You will find that the picture is being updated. Although it will be displayed, the picture does not move. That is because although the synchronization request is delayed, it will still block the UI thread during its execution. This blocking is so awesome that even the gif image doesn't move and looks like a static image. The conclusion is obvious. setTimeout treats the symptoms but not the root cause. It is equivalent to making the synchronization request "slightly" asynchronous. Then it will still enter a synchronization nightmare and block the thread. This method is only suitable for simple and short operations before sending the request.
2. Use Deferred to solve
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement custom instructions in Vue?
How to modify the sub-component style through the parent component in vue
Related to jsonp cross-domain issues in vue-resource
How to implement asynchronous component loading in vue webpack?
Use Nginx in vue.js to solve cross-domain issues
How to achieve the maximum common substring in JavaScript
How to implement mysql transaction automatic recycling connection in Node.js
The above is the detailed content of Browser suspended animation during ajax synchronization operation (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is apache server? What is apache server for?
Apr 13, 2025 am 11:57 AM
Apache server is a powerful web server software that acts as a bridge between browsers and website servers. 1. It handles HTTP requests and returns web page content based on requests; 2. Modular design allows extended functions, such as support for SSL encryption and dynamic web pages; 3. Configuration files (such as virtual host configurations) need to be carefully set to avoid security vulnerabilities, and optimize performance parameters, such as thread count and timeout time, in order to build high-performance and secure web applications.
Tips for using HDFS file system on CentOS
Apr 14, 2025 pm 07:30 PM
The Installation, Configuration and Optimization Guide for HDFS File System under CentOS System This article will guide you how to install, configure and optimize Hadoop Distributed File System (HDFS) on CentOS System. HDFS installation and configuration Java environment installation: First, make sure that the appropriate Java environment is installed. Edit /etc/profile file, add the following, and replace /usr/lib/java-1.8.0/jdk1.8.0_144 with your actual Java installation path: exportJAVA_HOME=/usr/lib/java-1.8.0/jdk1.8.0_144exportPATH=$J
Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in
Apr 18, 2025 am 09:24 AM
When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.
Nginx performance monitoring and troubleshooting tools
Apr 13, 2025 pm 10:00 PM
Nginx performance monitoring and troubleshooting are mainly carried out through the following steps: 1. Use nginx-V to view version information, and enable the stub_status module to monitor the number of active connections, requests and cache hit rate; 2. Use top command to monitor system resource occupation, iostat and vmstat monitor disk I/O and memory usage respectively; 3. Use tcpdump to capture packets to analyze network traffic and troubleshoot network connection problems; 4. Properly configure the number of worker processes to avoid insufficient concurrent processing capabilities or excessive process context switching overhead; 5. Correctly configure Nginx cache to avoid improper cache size settings; 6. By analyzing Nginx logs, such as using awk and grep commands or ELK
How to configure HTTPS server in Debian OpenSSL
Apr 13, 2025 am 11:03 AM
Configuring an HTTPS server on a Debian system involves several steps, including installing the necessary software, generating an SSL certificate, and configuring a web server (such as Apache or Nginx) to use an SSL certificate. Here is a basic guide, assuming you are using an ApacheWeb server. 1. Install the necessary software First, make sure your system is up to date and install Apache and OpenSSL: sudoaptupdatesudoaptupgradesudoaptinsta
How to monitor HDFS status on CentOS
Apr 14, 2025 pm 07:33 PM
There are many ways to monitor the status of HDFS (Hadoop Distributed File System) on CentOS systems. This article will introduce several commonly used methods to help you choose the most suitable solution. 1. Use Hadoop’s own WebUI, Hadoop’s own Web interface to provide cluster status monitoring function. Steps: Make sure the Hadoop cluster is up and running. Access the WebUI: Enter http://:50070 (Hadoop2.x) or http://:9870 (Hadoop3.x) in your browser. The default username and password are usually hdfs/hdfs. 2. Command line tool monitoring Hadoop provides a series of command line tools to facilitate monitoring
How to view thread status in Tomcat log
Apr 13, 2025 am 08:36 AM
To view the thread status in the Tomcat log, you can use the following methods: TomcatManagerWeb interface: Enter the management address of Tomcat (usually http://localhost:8080/manager) in the browser, and you can view the status of the thread pool after logging in. JMX Monitoring: Use JMX monitoring tools (such as JConsole) to connect to Tomcat's MBean server to view the status of Tomcat's thread pool. Select in JConsole
Nginx Server Installation and Quick Configuration Guide
Apr 13, 2025 pm 10:18 PM
This article introduces the construction and configuration methods of Nginx. 1. Install Nginx: Use sudoyumininstallnginx on CentOS, use sudoapt-getinstallnginx on Ubuntu, and start with sudosystemctlstartnginx after installation. 2. Basic configuration: Modify the /etc/nginx/nginx.conf file, mainly modify the listen (port) and root (site root directory) instructions in the server block, and after modification, use sudosystemctlrestartnginx to restart and take effect. 3. Virtual host configuration: in nginx.co
