Here to tell us about what is image stabilization!
Image Stabilization: if the task frequently triggered only when the task trigger interval exceeds the established time interval, the task will be executed.
The following example at a known reference on the almost:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防抖</title>
</head>
<body>
<button id="debounce">点我防抖！</button>
<script>
window.onload = function() {
// 1、获取这个按钮，并绑定事件
var myDebounce = document.getElementById("debounce");
myDebounce.addEventListener("click", debounce(sayDebounce));
}
// 2、防抖功能函数，接受传参
function debounce(fn) {
// 4、创建一个标记用来存放定时器的返回值
let timeout = null;
return function() {
// 5、每次当用户点击/输入的时候，把前一个定时器清除
clearTimeout(timeout);
// 6、然后创建一个新的 setTimeout，
// 这样就能保证点击按钮后的 interval 间隔内
// 如果用户还点击了的话，就不会执行 fn 函数
timeout = setTimeout(() => {
fn.call(this, arguments);
}, 1000);
};
}
// 3、需要进行防抖的事件处理
function sayDebounce() {
// ... 有些需要防抖的工作，在这里执行
console.log("防抖成功！");
}
</script>
</body>
</html> This is an example on the known almost, create a timer, if repeated triggering of the event within the specified time, it will call clearTimeout removed on a timer, the timer is reset. In other words, it has always been necessary to wait, not executed immediately, if the user clicks repeatedly, then had to wait again. So, fn.call(this, arguments) in fact, it is to replace the uncertain variables to the function.
Non-executed version immediately above in this example. Of course, I know almost example it's changed a bit, it becomes immediately executed version.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防抖</title>
</head>
<body>
<button id="debounce">点我防抖！</button>
<script>
window.onload = function() {
// 1、获取这个按钮，并绑定事件
var myDebounce = document.getElementById("debounce");
myDebounce.addEventListener("click", debounce(sayDebounce));
}
// 2、防抖功能函数，接受传参
function debounce(fn) {
// 4、创建一个标记用来存放定时器的返回值
let timeout = null;
//5.创建一个判断是否可点击值
let doit = true;
return function() {
// 5、当doit为真，既用户重复点击时，清除定时器
if(doit)clearTimeout(timeout);
//6.当doit为false时，既用户可点击，再将doit设为true，防止用户重复点击
else{
fn();
doit = true;
}
//7.设置定时器，这样就能保证点击按钮后的 interval 间隔内
// 如果用户还点击了的话，就不会执行 将doit设为false函数
timeout = setTimeout(() => {
doit = false;
}, 1000);
};
}
// 3、需要进行防抖的事件处理
function sayDebounce() {
// ... 有些需要防抖的工作，在这里执行
console.log("防抖成功！");
}
</script>
</body>
</html>The principle and execute immediately the same version, just click on a different order of execution.
Let's talk about what is throttling it!
Restriction: only perform a task within a specified time interval.
It's kind of like we buy the same brush, when we trigger a number of events in a certain time interval, in fact, it is only executed once the request!
Here let us quote an example will know almost understand!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>节流</title>
</head>
<body>
<button id="throttle">点我节流！</button>
<script>
window.onload = function() {
// 1、获取按钮，绑定点击事件
var myThrottle = document.getElementById("throttle");
myThrottle.addEventListener("click", throttle(sayThrottle));
}
// 2、节流函数体
function throttle(fn) {
// 4、通过闭包保存一个标记
let canRun = true;
return function() {
// 5、在函数开头判断标志是否为 true，不为 true 则中断函数
if(!canRun) {
return;
}
// 6、将 canRun 设置为 false，防止执行之前再被执行
canRun = false;
// 7、定时器
setTimeout( () => {
fn.call(this, arguments);
// 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
canRun = true;
}, 1000);
};
}
// 3、需要节流的事件
function sayThrottle() {
console.log("节流成功！");
}
</script>
</body>
</html>As can be seen from this example, the throttle can be prevented from sending repeated request within a certain time interval! And its image stabilization is somewhat similar, but there are essentially different, though they are prevented from re-triggering event!
Image stabilization is a long time to wait before triggering an event again!
Throttling only be triggered once an event within long time!
Repainting reflux
Before introducing redrawn and return a good idea to find out how to parse the browser is parsing the URL, or a look at the "browser page rendering process analysis."
it is good! Now we get to the point! What is redraw and return!
Redraw (repaint): When change does not affect the layout of the style elements, the browser will use to redraw the elements to be updated, only this time due to the need to re-draw the UI pixel level, and therefore less wear and tear.
Reflux (reflow): also known rearrangement (layout). When the element size, structure, or trigger certain attributes, the browser will re-render the page, called reflux. In this case, the browser needs to go through re-calculation, the calculations also need to re-page layout, and therefore heavier operations.
Perhaps this rather abstract concept, say it is difficult to understand! Simply put, like on some of the color of our page will dynamically change, while influential wood to size, layout, location, structure of these changes, it is called redraw, for example, while dynamically add nodes, change the size, location of these, called reflux!
Reflux loss is relatively large! So as not to produce too much reflux! It is, for example, to dynamically modify the style of a multi-step and do not try to be one step!
In order to avoid a large number of redraws and return!
- Avoid frequent operation pattern, can be modified once unified summary
- Try to use class styling changes, rather than directly operating style
- DOM reduction operation, one inserts a string may be used
Reflux will certainly trigger the redraw, redraw will not necessarily trigger reflux. Redraw overhead smaller, higher reflux price.
