Pesquisa de site

javascript - Remover listener de evento de rolagem usado em conjunto com função de throttling


Eu tenho uma função que eu chamo que abre uma visualização específica na minha página.

function dayViewOpen(target){
         var date = getDate();
          ..
          ..
          ..
        document.addEventListener('scroll',throttle(function(event){
            scrollAddData(date);
        },10));
}

Da mesma forma, eu tenho uma função para fechar aquela visualização em particular

 function dayViewClose(target){
        ..
        ..


    }

tudo até agora está funcionando perfeitamente. Mas problemas começam a surgir quando eu tenho que remover o listener de evento adicionado anteriormente. Ou seja, eu tenho que remover o listener de evento quando eu chamo a função dayViewclose();

Eu entendo que precisamos ter uma referência ao ouvinte para removê-lo, então eu faço assim.

var handler = throttle(function(event){
                scrollAddData();
            },10);

 function dayViewOpen(target){
         var date = getDate();
          ..
          ..
          ..
        document.addEventListener('scroll',handler,false);
}

 function dayViewClose(target){
        ..
        ..

        //remove earlier added event listener
       document.removeEventListener('scroll',handler,false);
    }
  • então não consigo passar o parâmetro date para o meu manipulador ( como posso passar o parâmetro date para o manipulador ) e
  • Mesmo se eu deixar de passar o parâmetro de data, ainda assim não consigo remover o manipulador com removeEventListener. (como posso remover o event listener corretamente)

Qualquer ajuda seria muito apreciada

Resposta #1

Você pode tentar declarar o listener de evento externamente, mas configurá-lo internamente:

var handler;

function dayViewOpen(target){
    var date = getDate();
    /* ... */
    handler = throttle(function(event){
        scrollAddData(date);
    }, 10);
    document.addEventListener('scroll', handler, false);
}

function dayViewClose(target){
    /* ... */
    document.removeEventListener('scroll', handler, false);
}