関数スロットリングとは、js メソッドが一定期間内に 1 回だけ実行されることを意味します。関数アンチシェイク: 頻繁にトリガーされると、十分な空き時間があるときにコードが 1 回だけ実行されることを意味します。この記事では主にjsの高機能関数であるアンチシェイクとスロットリングについて詳しく解説しますので、皆様のお役に立てれば幸いです。
1. 関数スロットル (スロットル)
1. 関数スロットルの目的
たとえば、DOM 操作は、非 DOM 操作よりも多くのメモリと CPU 時間を必要とします。あまりにも多くの DOM 関連操作を連続して実行しようとすると、ブラウザがハングし、場合によってはクラッシュする可能性があります。これは、IE で onresize イベント ハンドラーを使用する場合に特に発生する可能性が高く、ブラウザーのサイズが変更されると、イベントが継続的にトリガーされます。 onresize イベント ハンドラー内で DOM 操作を実行しようとすると、頻繁に変更が行われるため、ブラウザがクラッシュする可能性があります。別の例として、一般的な検索関数の場合、通常は keyup イベントをバインドし、キーボードが押されるたびに検索します。ただし、私たちの主な目的は、コンテンツを入力するたびに検索することです。これらの問題を解決するには、タイマーを使用して機能を調整できます。
2. 関数スロットリングの原則
一部のコードは、中断せずに継続的に繰り返し実行することができません。関数が初めて呼び出されるとき、指定された間隔の後にコードを実行するタイマーが作成されます。この関数が 2 回目に呼び出されるとき、前のタイマーがクリアされ、別のタイマーが設定されます。前のタイマーがすでに実行されている場合、この操作は意味がありません。ただし、前のタイマーがまだ実行されていない場合は、実際には新しいタイマーに置き換えられます。その目的は、関数の実行要求がしばらく停止された後にのみ関数を実行することです。
3. 関数スロットリングの基本モード
var processor = {
timeoutId: null,
//实际进行处理的方法
performProcessing: function(){
//实际执行的代码
},
//初始处理调用的方法
process: function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
}, 100);
}
};
//尝试开始执行
processor.process();4. Liezi
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="search" type="text" name="search">
<script>
function queryData(text){
console.log("搜索：" + text);
}
var input = document.getElementById("search");
input.addEventListener("keyup", function(event){
throttle(queryData, null,500,this.value,1000);
});
function throttle(fn,context,delay,text,mustApplyTime){
clearTimeout(fn.timer);
fn._cur=Date.now(); //记录当前时间
if(!fn._start){ //若该函数是第一次调用，则直接设置_start,即开始时间，为_cur，即此刻的时间
fn._start=fn._cur;
}
if(fn._cur-fn._start>mustApplyTime){ //当前时间与上一次函数被执行的时间作差，与mustApplyTime比较，若大于，则必须执行一次函数，若小于，则重新设置计时器
fn.call(context,text);
fn._start=fn._cur;
}else{
fn.timer=setTimeout(function(){
fn.call(context,text);
},delay);
}
}
</script>
</body>
</html>JavaScript スロットル関数の詳細説明
JS の関数 debounce (デバウンス) についてお話します
が一連の携帯電話番号
をすばやく入力すると、瞬時に 11 件のリクエストがトリガーされ、これは間違いなく私たちが望んでいることではありません。私たちが望んでいるのは、ユーザーが入力をやめたときに検証リクエストをトリガーすることです。このとき、手ぶれ補正機能が役に立ちます。function debounce(func, wait, immediate) {
var timeout; // 持久化一个定时器
// 闭包函数可以访问timeout
return function() {
// 通过 this 和 arguments 获得函数的作用域和参数
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout); // 如果事件被触发，清除timer并重新开始计时
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}; パラメーター関数は、アンチシェイクが必要な関数です。パラメーター wait は、ミリ秒単位の待機時間です。immediate パラメーターが true の場合、デバウンス関数は呼び出されるとすぐに関数を実行します。待機中 待機 この時間が経過すると、このパラメータを使用して、たとえば送信ボタンをクリックするときに複数のクリックが行われないようにすることができます。
例:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>函数防抖与节流 </title>
</head>
<body>
<form class="form-cnt" action="" method="">
<input type="text" value="" id="tel"/>
</form>
<script type="text/javascript" src="js/jQuery-2.1.4.min.js" ></script>
<script>
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
function checkTel(){
var val = $("#tel").val();
var re = new RegExp("(^1[3|4|5|7|8][0-9]{9}$)");
if(re.test(val)){
console.log("结果：格式正确");
}else{
console.log("结果：格式错误");
}
}
var lazyQuery = debounce(checkTel, 300);
$("#tel").on("keypress",lazyQuery);
</script>
</body>
</html>
この効果は 11 回ではなく 6 回トリガーされることがわかります
2. Lenovo の検索 (キーアップ)
3. 進行状況バー (高頻度の更新の進行状況は必要ない場合があります)4. 高頻度のクリック、描画、など（笑、邪悪）
(2). 関数 debounce (デバウンス)
1. スクロール/サイズ変更イベント
2. 連続テキスト入力、Ajax 検証/キーワード検索
以上がjsの高機能関数手ぶれ補正とスロットルの詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます
next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AMこの記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します
JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AMJavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。
JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AMJavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AMJavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AMPythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。
JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AMJavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
WebStorm Mac版
便利なJavaScript開発ツール
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
