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 - soundID＆amp; 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。

向多个元素添加输入超时

1 个答案: