Vue 손떨림 방지란 무엇입니까?
- 青灯夜游원래의
- 2022-07-20 18:46:282212검색
vue에서 흔들림 방지는 이벤트가 트리거된 후 n초 내에 콜백을 실행하는 것을 의미합니다. 이 n초 내에 다시 트리거되면 시간이 다시 시작됩니다. 특정 시간 간격 이벤트 처리 기능은 이벤트가 다시 발생하지 않을 때 한 번만 실행됩니다. 설정된 시간 간격이 되기 전에 이벤트가 다시 발생하면 지연이 다시 시작됩니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
Vue 프로젝트 최적화에 관해서는 손떨림 방지 조절에 대해 이야기해 보겠습니다.
Debounce
콜백은 이벤트가 트리거된 후 n초 후에 실행됩니다. 이 n초 내에 다시 트리거되면 시간이 재설정됩니다.
설명: 이벤트가 계속 트리거되면 must 이벤트 처리 기능은 해당 시간 간격 내에 이벤트가 발생하지 않은 경우 한 번만 실행됩니다. 설정된 시간 간격이 되기 전에 이벤트가 다시 발생하면 지연이 다시 시작됩니다.
일반적인 이해는 요청을 클릭하거나 로드를 클릭할 때 한 번만 클릭하면 되지만 요청이 느리기 때문에 여러 번 클릭하게 되어 여러 번 클릭한 후 흔들림 방지가 마지막으로 발생한다는 의미입니다. 번 요청합니다.
사례 1:
스크롤 이벤트가 연속적으로 발생하면 핸들 기능이 즉시 실행되지 않습니다. 스크롤 이벤트가 1000밀리초 내에 발생하지 않으면 핸들 기능이 지연되어 한 번 실행됩니다.
function debounce(fn, wait) {
let timeout = null
return function() {
if(timeout !== null) clearTimeout(timeout)
timeout = setTimeout(fn, wait);
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))addEventListener의 두 번째 매개변수는 실제로 디바운스 함수의 반환 메서드입니다. timeout = null로 설정하세요. 이 코드 줄은 addEventListener가 이벤트를 트리거할 때마다 한 번만 실행됩니다. 그런 다음 스크롤 이벤트가 트리거될 때마다 마지막 지연기가 실행됩니다. 스크롤 이벤트가 트리거되는 것을 멈추면, 마지막으로 기록된 딜레이는 지워지지 않고 지연된 방식으로 실행될 수 있습니다.
사례 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
输入内容：<input type="text" @keyup="deb"/>
<div> 输入次数：{{num}}</div>
</div>
<script>
let time
var app=new Vue({
el:'#app',
data:{
num:0,
},
methods:{
deb: function () {
let that = this
if (time) {
clearTimeout(time)
}
time = setTimeout(function () {
that.num++
console.log('输入了'+that.num+'次')
time = undefined;
}, 2000)
}
}
})
</script>
</body>
</html>Rendering: (텍스트를 한 번 입력하고 2초 후에 실행합니다. 여러 번 입력하면 한 번 실행됩니다. 입력 횟수는 1씩만 증가합니다.):
전역적으로 정의된 시간은 다음과 같습니다. undefind 연속 입력 과정에서 매번 keyup 이벤트가 발생하며, 입력 간격이 설정된 시간인 2초를 초과하는 경우에만 타이머가 다시 렌더링됩니다. .
키보드 수정자 사용: (예: .enter)
<div id="app">
输入内容：<input type="text" class="input" @keyup.enter="deb"/>
<div> 输入次数：{{num}}</div>
</div>이렇게 Enter를 계속 누르면 Enter가 한 번만 실행되고 Enter를 누를 때마다 두 번에 대해 한 번 실행됩니다. 간격으로 설정된 초입니다.
그래서 제출 버튼을 계속해서 클릭하고 터치하게 된다는 점을 고려하면 흔들림 방지가 매우 필요합니다.
물론 다른 솔루션도 있습니다. 예를 들어 프로젝트에서는 저장을 클릭하면 요청 인터페이스가 200을 반환하기 전에는 버튼 사용이 금지되므로 반복 클릭이 발생하지 않습니다.
【추천 관련 동영상 튜토리얼: vue 동영상 튜토리얼, 웹 프론트엔드 시작하기】
위 내용은 Vue 손떨림 방지란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!