1. イベントの安定化
①本来、イベントは頻繁にトリガーされますが、無数のイベントトリガーのうちの一部が有効であることを期待するだけです (例: ユーザーが一時停止したときにのみ関数を呼び出すなど)。特に、一度トリガーされてリクエストが送信されると、無数のジッターが発生します。
例: キーボード イベント: onkeydown、onkeyup、onkeypress、oninput はすべて、キーを押すと 1 回トリガーされます。トリガーは非常に頻繁に発生します。
②使用シーン：
検索ボックス (Baidu 検索ボックス、淘宝、京東など) では、ユーザーがコンテンツを入力するたびにリクエストを送信する必要があり、キーワードに対応するコンテンツがバックエンドから取得されます。
特に中国語の文字を入力する場合、ユーザーが漢字の入力を完了したときにユーザーがトリガー (リクエストの送信) することを期待しますが、実際の状況では、ユーザーが文字を入力するとイベントがトリガー (リクエストの送信) されます。リクエスト）
覚えておいてください: ユーザーの入力習慣: 1 つまたは複数の漢字を入力した後、短い一時停止が生じます。そして、連続して文字を入力する過程で、一時停止することはありません。イベント手ぶれ補正の考え方は、この短い一時停止を利用することです。
<!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. 機能のスロットリング
① スロットリングとは、あまり頻繁に呼び出しを行わないことを意味します。たとえば、200 ミリ秒に 1 回呼び出します。
②利用シーン：例：ページが何度もスクロールされる場合（オンスクロールは何度もトリガーされる）、トリガー（関数の呼び出し）はそれほど頻繁ではないことを望みます
<!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. イベント アンチシェイクと機能スロットルの違い:
① 機能スロットル：
スロットリングとは、あまり頻繁に呼び出しを行わないことを意味します。たとえば、200 ミリ秒に 1 回呼び出します。
使用するシーン:
例: ページが何度もスクロールされるとき (onscroll は何度もトリガーされます)、トリガー (関数の呼び出し) がそれほど頻繁ではないことを願っています
②イベント手ぶれ補正
アンチシェイク: ユーザーがイベントを継続的にトリガーしている間はコードを実行できません。
イベント アンチシェイクの重要な点は、ユーザーが一時停止するとコードが実行され (関数の呼び出し)、一時停止がない場合はコードが実行されないことです。
関数スロットルの重要な点は、ユーザーが一時停止するとトリガーされるが、トリガー (関数の呼び出し) の頻度は元のイベントほどではないことです。
<!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. シングルページアプリケーション
HTML5 では次のことが追加されます。
History.state: ページの履歴を記録できます。ページスタックに記録されます。ただし、このプロパティを通じてスタックの最上位を確認（取得）できるのはのみです。
history.replaceState()//スタックの一番上のレコードを置き換えます
history.pushState();//ページレコードをページスタックに追加します
window.onpopstate: イベント。ブラウザの戻るボタンがクリックされたときに発生します。レコードをページ スタックに自動的にポップします。