js 떨 림 방지 와 절 류 최적화 브 라 우 저 스크롤 바 가 맨 아래로 굴 러 갈 때 더 많은 데 이 터 를 불 러 옵 니 다.

떨 림 방지 와 절 류 는 주로 브 라 우 저 창 이 어떤 동작 을 수행 하 는 것 을 방지 하 는 데 사 용 됩 니 다. 예 를 들 어 특정한 input 입력 상자 keyup 변 화 를 감청 하고 폭포 흐름 구 조 를 할 때 Y 축 이 구 르 고 그림 을 불 러 옵 니 다.
js 함수 의 떨 림 방지
한 동안 의 사건 을 거 쳐 서 야 어떤 조작 을 실 행 했 는데, 만약 시간 내 에 또 이 조작 을 실행 했다 면 시간 을 연장 하여 다시 계산 을 시작 할 것 이다.

/*     input  keyup   */

/ * 입력 이 빠 르 면 출력 결과 가 여러 번 반 복 됩 니 다 * /

window.onload = function () {
    let obj = document.getElementById('input')
    obj.addEventListener('keyup',()=>{
        let val = obj.value;
        inputchange(val)
    },false)
}
function inputchange(val) {
    console.log(val)
}
// 11  11  123 123  123456 123456 123456

떨 림 방지 로 처리

/*        input  keyup   */
/*                   */
window.onload = function () {
    let obj = document.getElementById('input')
    let callback = inputchange()
    obj.addEventListener('keyup',()=>{
        let val = obj.value;
        callback(val)
    },false)
}
//        
//   time          inputchange         
//       
function inputchange() {
    var time
    return function(val){
        if(time)
        {
            clearTimeout(time)
        }
        time = setTimeout(() => {
            console.log(val)
        }, 200);
    }
}

js 함수 절 류
정의: 어떤 작업 을 실행 한 후 일정 시간 동안 이 작업 을 수행 하지 않 으 면 안 됩 니 다.

/*        input  keyup   */
/*                   */
window.onload = function () {
    let obj = document.getElementById('input')
    let callback = inputchange()
    obj.addEventListener('keyup',()=>{
        let val = obj.value;
        callback(val)
    },false)
}
//       hasdone
function inputchange() {
    var hasdone = false
    return function(val){
        //        hasdone = true      
        if(hasdone)
        {
            return;
        }
        //       
        console.log(val)
        hasdone =true
        /*        hasdone         */
        time = setTimeout(() => {
            hasdone = false
        }, 2000);
    }
}

위의 절 류 는 첫 번 째 입력 이 바로 실행 되 고 마지막 입력 이 실행 되 지 않 습 니 다.
그리고 첫 번 째 입력 이 바로 실행 되 지 않 고 시간 내 에 마지막 으로 실 행 됩 니 다.

/*        input  keyup   */
/*                   */
window.onload = function () {
    let obj = document.getElementById('input')
    let callback = inputchange()
    obj.addEventListener('keyup',()=>{
        let val = obj.value;
        callback(val)
    },false)
}
//       hasdone
/*         ，          */
function inputchange() {
    var hasdone = false
    var time = null
    return function(val){
        //        hasdone = true      
        if(hasdone)
        {
            return;
        }  
        //             
        hasdone =true
        /*        hasdone         */
        time = setTimeout(() => {
            
            console.log(val)
            hasdone = false
        }, 500);
    }
}

 js 브 라 우 저 스크롤 바 가 맨 아래로 굴 러 갈 때 더 많은 데 이 터 를 불 러 옵 니 다.

baojia1

baojia2

baojia3

baojia4

baojia5

baojia6

baojia7

baojia8

baojia9

baojia10

baojia11

baojia12

baojia13

baojia14

baojia15

baojia16

baojia17

baojia18

baojia19

baojia20

/*        onsroll */
/*                 */
var loadmore = loadmoreresource ();
/*               */
window.onscroll = function (e) {
    /*           */
    /*                  */
    var e =e || window.event;
    //           document.body.scrollTop     
    /*          */
    var scrolltop = document.documentElement.scrollTop||document.body.scrollTop;
    /*           */
    var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
    /*        */
    var clientHeight = document.documentElement.clientHeight||document.body.clientHeight;

    /*  scrolltop clientHeight   scrollHeight */
    if(scrollHeight === (scrolltop+clientHeight))
    {
        loadmore();
    }
}

/*           */
/*           ，              */
function loadmoreresource () {
    let  i = 21; 
    /*          */
    let isloading = false;
    return function () {
        /*                */
        if(isloading) {
            return;
        }
        /*        */
        loadingimg()
        let obj = document.getElementById('box');
        /*               */
        let docfragment = document.createDocumentFragment();
        for(let j=0;j<5;j++){
            let li = document.createElement('li')
            li.append('baojia'+i)
            docfragment.appendChild(li)
            i++;
        }
        /*           true */
        isloading = true;
        /*   setTimeout    api     */
        setTimeout(() => {
            obj.appendChild(docfragment)
            loadingimg()
            /*         false */
            isloading = false
        }, 3000);
    }
}
/*      */

function loadingimg() {
    let loading = document.getElementById('loading');
    if(loading.style.display==='block') {
        loading.style.display = 'none';
    } else {
        loading.style.display = 'block';
    }
}