1. Event stabilization
①Originally, events are triggered frequently, but we only hope that some of the countless event triggers are valid (such as: the user only calls the function when there is a short stop). Especially when it is triggered once and a request is sent, there will be countless jitters.
Such as: keyboard events: onkeydown, onkeyup, onkeypress, oninput, all are triggered once by pressing a key. The trigger is very frequent.
②Usage scene:
Search box (Baidu search box, Taobao, Jingdong, etc.), every time the user enters content, a request needs to be sent, and the content corresponding to the keyword is obtained from the back end.
Especially when entering Chinese characters: we hope that the user will trigger (send a request) when the user completes the input of Chinese characters. However, the actual situation is: when the user enters a letter, an event will be triggered (send a request)
Remember: the user's input habits: after inputting a Chinese character, or several Chinese characters, there will be a short pause. And in the process of continuously inputting letters, there will be no pause. The idea of event anti-shake is to use this short pause.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<input type="text" id="querystr">
<input type="submit" value="百度一下">
<ul id="search-list">
<li>运动鞋</li>
<li>拖鞋</li>
</ul>
</body>
</html>
<script type="text/javascript">
// 一、事件防抖的基本防抖代码。
let myTimer;
document.getElementById("querystr").oninput = function(){
if(myTimer>=0){
clearTimeout(myTimer);
myTimer=undefined;
}
myTimer = setTimeout(function(){
console.log("发送请求");
},200);
}
// 二、使用百度开放的接口
let myTimer;
document.getElementById("querystr").oninput = function(){
//在每次输入时,先清除上一次的定时器,清除了定时器后,就不会发送请求了。
//即本次输入和上次输入的间隔非常短(小于100ms)时,上次定时器的代码就不会执行,也就不会发请求了。
//如果本次输入和上次输入之间的时间间隔大于100ms时,上次输入的内容就会发送请求。
if(myTimer){
window.clearTimeout(myTimer);
}
myTimer = setTimeout(()=>{
let scriptDom = document.createElement("script");
scriptDom.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.value + '&json=1&p=3&sid=1438_24869_21080_18560_17001_25177_22160&req=2&bs=1%2B&pbs=1%2B&csor=2&pwd=1%3D&cb=f&_=1511334117083';
document.body.appendChild(scriptDom);
scriptDom.remove();
},200);
}
function f(data){
console.log(data);
let htmlStr = "";
data.s.forEach((item)=>{
htmlStr+=`<li>${item}</li>`;
});
document.getElementById("search-list").innerHTML = htmlStr;
}
</script>
2. Function throttling
① Throttling means not to call too frequently; for example, call once every 200ms.
②Usage scenarios: For example: when the page is scrolled countless times (onscroll will be triggered countless times), but I hope that the trigger (call function) will not be so frequent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
</style>
</head>
<body style="height: 1000px;">
</body>
</html>
<script type="text/javascript">
let myTimer;
window.onscroll = function () {
if (myTimer) {
return;
}
myTimer = setTimeout(function () {
console.log("滚动了");
myTimer = undefined;
}, 1000);
}
</script>
3. The difference between event anti-shake and function throttling:
① Function throttling:
Throttling means: do not call too frequently; for example, call once every 200ms.
scenes to be used:
For example: when the page is scrolled countless times (onscroll will be triggered countless times), but I hope that the trigger (call function) will not be so frequent
②Event anti-shake
Anti-shake: Code cannot be executed while the user continuously triggers events.
The key to event anti-shake is: when the user pauses, the code is executed (calling the function), and when there is no pause, the code is not executed;
The key to function throttling is that it will be triggered if the user pauses, but the frequency of triggers (calling functions) is not as much as the original event
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
</style>
</head>
<body style="height: 1000px;">
</body>
</html>
<script type="text/javascript">
// 一、事件防抖和函数节流的区别:
// 1、函数节流:
// 节流的意思是:不要调用太频繁;如每隔200ms调用一次.
// 使用场景:
// 如:在页面无数次的滚动时(就会触发无数次的onscroll),但是我希望触发(调用函数)不要那么频繁.
// 2、事件防抖
// 防抖:在用户连续触发事件过程中,不能执行代码。
//一. 函数节流:
let i = 0;
let myTimer = null;
window.onscroll = function(){
if(myTimer!=null){
return;
}
myTimer = setTimeout(()=>{
console.log(i++);
myTimer =null;
},1000);
}
// 二.事件防抖
let i = 0;
let myTimer = null;
window.onscroll = function(){
if(myTimer!=null){
window.clearTimeout(myTimer);
}
//重新启动定时器
myTimer = setTimeout(()=>{
console.log(i++);
myTimer =null;
},200);
}
function $(id){
return document.getElementById(id);
}
</script>
4. Single page application
HTML5 adds:
history.state: You can record the history of the page. Recorded in the page stack. But you can only see (get) the top of the stack through this property
history.replaceState()//Replace the record at the top of the stack
history.pushState();//Add a page record to the page stack
window.onpopstate: event. Fired when the back button on the browser is clicked. Automatically pop the records in the page stack.