我正在开发一个可以播放由用户控制的多种声音的应用程序。我正在尝试调整声音的音量,这可以独立完成。我给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 );
});
最佳答案
您忘记了 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 .
关于javascript - 为多个元素添加输入超时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30417658/