js 고성능 기능 흔들림 방지 및 조절에 대한 자세한 설명-JS 튜토리얼-php.cn

js 고성능 기능 흔들림 방지 및 조절에 대한 자세한 설명

小云云

풀어 주다： 2018-03-17 15:01:57

원래의

1763명이 탐색했습니다.

기능 조절은 js 메소드가 특정 시간 내에 한 번만 실행된다는 것을 의미합니다. 기능 흔들림 방지: 자주 트리거되면 여유 시간이 충분할 때 코드가 한 번만 실행된다는 것을 의미합니다. 이 기사는 주로 js의 고성능 기능인 흔들림 방지 및 조절에 대한 자세한 설명을 공유합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

1. 함수 조절(throttle)

1. 함수 조절의 목적
예를 들어 DOM 작업에는 DOM이 아닌 상호 작용보다 더 많은 메모리와 CPU 시간이 필요합니다. 너무 많은 DOM 관련 작업을 연속해서 수행하려고 하면 브라우저가 중단되고 때로는 충돌이 발생할 수도 있습니다. 이는 특히 IE에서 onresize 이벤트 핸들러를 사용할 때 발생할 가능성이 높습니다. 브라우저 크기가 조정되면 이벤트가 계속해서 트리거됩니다. onresize 이벤트 핸들러 내에서 DOM 작업을 수행하려고 하면 변경 빈도가 높아져 브라우저가 중단될 수 있습니다. 또 다른 예로, 일반적인 검색 기능의 경우 일반적으로 keyup 이벤트를 바인딩하고 키보드를 누를 때마다 검색합니다. 그러나 우리의 목적은 주로 어떤 콘텐츠를 입력할 때마다 검색하는 것입니다. 이러한 문제를 해결하기 위해 타이머를 사용하여 기능을 조절할 수 있습니다.
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>

로그인 후 복사

자바스크립트 조절 기능에 대한 자세한 설명 Throttle

JS의 함수 조절에 대해 이야기

2. 이에 대해 설명하기 전에. 기능의 예를 살펴보겠습니다. 등록 페이지에서는 전화번호 확인이 필요합니다. 이 시점에서 우리가 생각할 수 있는 것은 keypress 이벤트를 듣고 이를 확인하는 것입니다. 이 방법 자체는 정확하지만 사용자가

일련의 휴대폰 번호

를 빠르게 입력하면 즉시 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는 대기 시간(밀리초)입니다. 즉시 매개변수가 true인 경우 디바운스 함수는 호출 시 즉시 함수를 실행합니다. wait for wait 이 시간 이후에는 이 매개변수를 사용하여 제출 버튼을 클릭할 때 여러 번 클릭하는 것을 방지할 수 있습니다.

예:

<!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번 발동되는 것을 볼 수 있습니다