익명 기능에서 작동하지 않는 lodash 디바운스

익명 기능에서 작동하지 않는 lodash 디바운스

안녕하세요. 키업 이벤트에 직접 전달할 때 디바운스 기능이 예상대로 작동하는 이유를 알 수 없지만 익명 기능으로 감싸면 작동하지 않습니다.

저는 그 문제에 대해 잘 알고 있습니다: http://jsfiddle.net/6hg95/1/

편집: 제가 시도한 모든 것을 추가했습니다.

HTML

<input id='anonFunction'/>
<input id='noReturnAnonFunction'/>
<input id='exeDebouncedFunc'/>
<input id='function'/>
<div id='output'></div>

자바스크립트

$(document).ready(function(){
    $('#anonFunction').on('keyup', function () {
        return _.debounce(debounceIt, 500, false); //Why does this differ from #function
    });
    $('#noReturnAnonFunction').on('keyup', function () {
        _.debounce(debounceIt, 500, false); //Not being executed
    });
    $('#exeDebouncedFunc').on('keyup', function () {
        _.debounce(debounceIt, 500, false)(); //Executing the debounced function results in wrong behaviour
    });
    $('#function').on('keyup', _.debounce(debounceIt, 500, false)); //This is working.
});

function debounceIt(){
    $('#output').append('debounced');
}

anonFunction그리고.noReturnAnonFunction디바운스 함수를 실행하지 않고 마지막으로 실행합니다.function불을 피웁니다.나는 이것이 왜 그런지 이해할 수 없습니다.누가 이것을 이해하는 것을 도와줄 수 있습니까?

EDIT Ok, 그래서 #exeDebounce에서 데바운스가 발생하지 않는 이유.Func(당신이 참조하는 것)는 함수가 익명 함수의 범위에서 실행되고 다른 키업 이벤트가 다른 익명 범위에서 새로운 함수를 생성하기 때문입니다. 따라서 디바이드 함수는 당신이 어떤 것을 입력한 만큼 실행됩니다(예상 동작이 될 한 번 실행하는 대신).#function)?

사이의 차이점을 설명해 주시겠습니까?#anonFunction그리고#function이것은 그들 중 한 명이 작동하고 다른 한 명은 작동하지 않는 이유를 조사하는 것의 문제입니까?

EDIT OK, 이제 왜 이런 일이 일어나는지 이해합니다.그리고 제가 익명의 기능으로 포장해야 하는 이유는 다음과 같습니다.

피들: http://jsfiddle.net/6hg95/5/

HTML

<input id='anonFunction'/>
<div id='output'></div>

자바스크립트

(function(){
    var debounce = _.debounce(fireServerEvent, 500, false);

    $('#anonFunction').on('keyup', function () {
        //clear textfield
        $('#output').append('clearNotifications<br/>');
        debounce();
    });

    function fireServerEvent(){
        $('#output').append('serverEvent<br/>');
    }
})();

Palpatim이 설명했듯이, 그 이유는_.debounce(...)호출 시 마법을 수행하는 함수를 반환합니다.

그러므로 당신의 안에#anonFunction예를 들어, 키 수신기가 있는데, 이 수신기는 호출되면 호출기로 함수를 반환하고 이벤트 수신기의 반환 값은 반환하지 않습니다.

다음은 의 일부입니다._.debounce(...)정의:

_.debounce
function (func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      if (immediate && !timeout) func.apply(context, args);
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  } 

주요 이벤트 수신기가 반환된 함수를 호출해야 합니다._.debounce(...)또는 당신은 당신의 비선택적인 예와 같이 할 수 있고 당신은 다음으로부터 반환된 함수를 사용할 수 있습니다._.debounce(...)이벤트 수신기로 호출합니다.

더 쉽게 생각하기

_.discounce는 데바운스 함수를 반환합니다!그래서 생각하는 대신에.

$el.on('keyup'), function(){
   _.debounce(doYourThing,500); //uh I want to debounce this
}

당신은 차라리 디바이드 함수를 대신 부릅니다.

var doYourThingDebounced = _.debounce(doYourThing, 500); //YES, this will always be debounced

$el.on('keyup', doYourThingDebounced);

debounce 함수를 실행하는 것이 아니라, 디바운스가 내장된 함수를 반환합니다.

돌아온다

(기능):새 디바이드 함수를 반환합니다.

그래서 너의#function핸들러는 실제로 jQuery가 키업 핸들러로 사용할 함수를 반환함으로써 올바른 작업을 수행하고 있습니다.수정하기#noReturnAnonFunction예를 들어, 당신은 단순히 당신의 함수의 맥락에서 디바이드 함수를 실행할 수 있습니다.

$('#noReturnAnonFunction').on('keyup', function () {
    _.debounce(debounceIt, 500, false)(); // Immediately executes
});

하지만 그것은 당신의 데뷔에 불필요한 익명 함수 래퍼를 도입하는 것입니다.

다음과 같이 디바운스 함수를 반환할 수 있습니다.

(function(){
    var debounce = _.debounce(fireServerEvent, 500, false);

    $('#anonFunction').on('keyup', function () {
        //clear textfield
        $('#output').append('clearNotifications<br/>');
        return debounce();
    });

    function fireServerEvent(){
        $('#output').append('serverEvent<br/>');
    }
})();

뒤늦은 상담으로 데바운스를 부를 수 있는 해결책을 찾다가 우연히 발견했고, https://newbedev.com/lodash-debounce-not-working-in-react 라는 기사를 발견했습니다.

스로틀/디바운스가 작동하지 않아 여기에 온 사람들을 위한 솔루션 > Function Component 사용 - useRef()를 통해 디바운스된 기능을 저장해야 합니다.

export const ComponentName = (value = null) => {
  const [inputValue, setInputValue] = useState(value);

  const setServicesValue = value => Services.setValue(value);

  const setServicesValueDebounced = useRef(_.debounce(setServicesValue, 1000));

  const handleChange = ({ currentTarget: { value } }) => {
    setInputValue(value);
    setServicesValueDebounced.current(value);
  };

  return <input onChange={handleChange} value={inputValue} />;
};

더 일반적으로, 후행 동작(마지막 클릭 또는 선택한 입력에서 마지막 변경 가능성이 높은 경우)과 첫 번째 클릭/변경에 대한 시각적 피드백을 포함하는 데바운스를 원할 경우 동일한 문제에 직면하게 됩니다.

이것은 작동하지 않습니다.

$(document).on('change', "#select", function() {
    $('.ajax-loader').show();
    _.debounce(processSelectChange, 1000);
});

이것이 해결책이 될 것입니다.

$(document).on('change', "#select", function() {
    $('.ajax-loader').show();
});
$(document).on('change', "#select", _.debounce(processSelectChange, 1000));

언급URL : https://stackoverflow.com/questions/24306290/lodash-debounce-not-working-in-anonymous-function