1. Estabilización de eventos
①Originalmente, los eventos se desencadenan con frecuencia, pero solo esperamos que algunos de los innumerables desencadenantes de eventos sean válidos (como: el usuario solo llama a la función cuando hay una parada breve). Especialmente cuando se activa una vez y se envía una solicitud, habrá innumerables nervios.
Tales como: eventos de teclado: onkeydown, onkeyup, onkeypress, oninput, todos se disparan una vez al presionar una tecla, el disparador es muy frecuente.
② Escena de uso:
Cuadro de búsqueda (cuadro de búsqueda de Baidu, Taobao, Jingdong, etc.), cada vez que el usuario ingresa contenido, se debe enviar una solicitud y el contenido correspondiente a la palabra clave se obtiene del back-end.
Especialmente al ingresar caracteres chinos: esperamos que el usuario active (envíe una solicitud) cuando el usuario complete la entrada de caracteres chinos. Sin embargo, la situación real es: cuando el usuario ingresa una letra, se activará un evento (enviar un pedido)
Recuerde: los hábitos de entrada del usuario: después de ingresar un carácter chino o varios caracteres chinos, habrá una breve pausa. Y en el proceso de ingresar letras continuamente, no habrá pausa. La idea del evento antivibración es usar esta breve pausa.
<!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. Estrangulación de funciones
① Limitar significa no llamar con demasiada frecuencia; por ejemplo, llamar una vez cada 200 ms.
②Escenarios de uso: por ejemplo: cuando la página se desplaza innumerables veces (el desplazamiento se activará innumerables veces), pero espero que el desencadenante (función de llamada) no sea tan frecuente
<!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. La diferencia entre la antivibración de eventos y la regulación de funciones:
① Función de estrangulamiento:
La limitación significa: no llame con demasiada frecuencia; por ejemplo, llame una vez cada 200 ms.
Escenas a utilizar:
Por ejemplo: cuando la página se desplaza innumerables veces (onscroll se activará innumerables veces), pero espero que el activador (función de llamada) no sea tan frecuente
②Anti-vibración de eventos
Anti-vibración: el código no se puede ejecutar mientras el usuario activa continuamente eventos.
La clave para el antivibración de eventos es: cuando el usuario hace una pausa, el código se ejecuta (llamando a la función), y cuando no hay pausa, el código no se ejecuta;
La clave para la limitación de funciones es que se activará si el usuario hace una pausa, pero la frecuencia de los activadores (funciones de llamada) no es tanta como el evento original.
<!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. Solicitud de una sola página
HTML5 agrega:
history.state: Puede registrar el historial de la página. Grabado en la pila de páginas. Pero solo puede ver (obtener) la parte superior de la pila a través de esta propiedad
history.replaceState()//Reemplazar el registro en la parte superior de la pila
history.pushState();//Agregar un registro de página a la pila de páginas
ventana.onpopstate: evento. Se activa cuando se hace clic en el botón Atrás del navegador. Extraiga automáticamente los registros en la pila de páginas.