jsの高機能関数手ぶれ補正とスロットルの詳細解説-jsチュートリアル-php.cn

jsの高機能関数手ぶれ補正とスロットルの詳細解説

小云云

リリース： 2018-03-17 15:01:57

オリジナル

1762 人が閲覧しました

関数スロットリングとは、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 (デバウンス) についてお話します

2.これ関数の例を見てみましょう。登録ページでは電話番号の認証が必要です。この時点で考えられるのは、キー押下イベントをリッスンして検証することです。この方法自体は正しいですが、ユーザー

が一連の携帯電話番号

をすばやく入力すると、瞬時に 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 回トリガーされることがわかります