javascript - 为多个元素添加输入超时

Question

我正在开发一个可以播放由用户控制的多种声音的应用程序。我正在尝试调整声音的音量，这可以独立完成。我给keyup添加了超时功能，所以它会在1.5秒没有输入后调整音量。

问题是所有框都使用相同的计时器，因此如果您在 1.5 秒内编辑多个框，则只有最后一个框会更新。

我试图通过使用数组来跟踪单独的函数来解决这个问题，但意识到它不是复制函数，只是保存对它的引用。

我无法为每个声音显式创建变量，因为我将让用户添加自己的变量。关于如何解决这个问题的任何想法。

我在这里简化了它:http://codepen.io/samkeddy/pen/VLKJjJ

//timer 
volDelay = [];

delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
})();

$('body').on('keyup', '.volume', function () {
        soundID = $(this).parent().data('soundid');
        newVol = $(this).val();

        volDelay[soundID] = delay;

        volDelay[soundID](function(){

            console.log('set vol on ' +soundID+ ' to ' +newVol);
            //set volume 
            $('.sound-'+soundID).html(newVol);

         }, 1500 );
});

Answer 1

您忘记了 var-ing soundID 和 newVol，这使它们成为全局的，并且您每次都重置它们。

此外，您对计时器的使用造成了困惑。只需将timerID保存在数组中并使用它来清除即可。

//timer 
volDelay = [];

    $('body').on('keyup', '.volume', function () {
            var soundID = $(this).parent().data('soundid');
            var newVol = $(this).val();

      clearTimeout(volDelay[soundID]);
            volDelay[soundID] = setTimeout(function(){

                console.log('set vol on ' +soundID+ ' to ' +newVol);
                //set volume 
                $('.sound-'+soundID).html(newVol);

             }, 1500 );
    });

和固定的 codepen .