자바스크립트의 손떨림 방지 및 조절이란 무엇입니까?

JavaScript에서 흔들림 방지는 고주파 이벤트가 트리거된 후 n초 내에 함수가 한 번만 실행된다는 의미입니다. 고주파 이벤트가 n초 내에 다시 트리거되면 시간이 다시 계산됩니다. 이벤트가 지속적으로 발생하면 이벤트 처리 함수가 일정 시간 내에 한 번만 호출되는지 확인하세요.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

1. 흔들림 방지

고주파 이벤트가 발생한 후 n초 내에 한 번만 실행됩니다. n초 내에 다시 고주파 이벤트가 발생하면 시간이 다시 계산됩니다.

• 아이디어:
  액션 바인딩 이벤트는 액션이 ​​발생한 후 일정 시간이 지나면 이벤트가 발생합니다. 이 기간 동안 해당 액션이 다시 발생하면 일정 시간 동안 기다렸다가 이벤트를 발생시킵니다.

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout);
         // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { 
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内
        // 如果还有字符输入的话，就不会执行 fn 函数
          fn.apply(this, arguments);
          //因为sayHi函数是在全局中运行，this默认指向了window
          //所以要用apply将inp的this传入
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

예를 들어, 사용자가 입력 상자에 문자열을 입력한 후 Ajax 요청이 자동으로 전송되어야 하는 경우 흔들림 방지가 수행되지 않으면 사용자는 매번 문자열을 변경하게 됩니다. (문자 삭제 또는 새 문자 입력) 요청을 보내지만 흔들림 방지 처리를 수행하면 사용자가 문자를 입력한 후 0.5초 후에도 문자열이 변경되지 않습니다. (이는 사용자가 문자열 입력을 완료했음을 의미할 가능성이 높습니다. ), 요청이 전송됩니다. 문자열이 0.5초 내에 변경되면(이는 현재 문자열이 사용자가 입력할 최종 문자열이 아님을 의미할 가능성이 높음) 요청이 일시적으로 전송되지 않고 요청이 전송됩니다. 사용자가 요청을 다시 보내기 전에 0.5초 이상 일시 중지할 때까지 0.5초 동안 계속 다시 계산됩니다.

2. Throttling

이벤트가 지속적으로 발생하는 경우 이벤트 처리 기능이 일정 시간 내에 한 번만 호출되는지 확인하세요. 따라서 조절은 함수의 실행 빈도를 희석시킵니다.

• 아이디어:
  액션 바인딩 이벤트, 해당 액션이 발생한 후 일정 시간 후에 이벤트가 트리거됩니다. 이 기간 동안 해당 액션이 다시 발생하면 액션이 발생합니다. 이벤트가 실행될 때까지만 무시됩니다.

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次
          //循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

3. 애플리케이션 시나리오와 결합

debounce(흔들림 방지)

• Lenovo 검색, 사용자가 계속 값을 입력할 때 흔들림 방지를 사용하여 요청 리소스를 절약하세요.

• 창 크기 조정이 트리거될 때 브라우저 창 크기를 지속적으로 조정하면 이 이벤트가 계속 트리거됩니다. 흔들림 방지를 사용하여 한 번만 트리거되도록 하세요

throttle(throttle)

• 마우스를 계속 클릭하세요. Trigger, mousedown (단위 시간당 한 번만 트리거)

• 자동으로 더 많이 로드하기 위해 아래쪽으로 슬라이드할지 여부와 같은 스크롤 이벤트 모니터링, 스로틀을 사용하여 판단

[권장 학습: javascript 고급 튜토리얼]

위 내용은 자바스크립트의 손떨림 방지 및 조절이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!