如果在一段时间后没有再次运行，则只运行JavaScript函数

我有一个输入控制元素的状态变化非常迅速。 这会导致元素闪烁，因为它的一部分会发生变化。

我试图存储这些状态更改，然后提供一段时间（任意500毫秒）更改状态没有任何更改。

我试图使用超时解决这个问题，如下面的代码所示（与小提琴中的代码相同）：

var changingToHappy = false; // Original no attempts to fix functions. //var ifHappy = function () { // $("#face").text(':)'); //}; // //var ifNotHappy = function () { // $("#face").text(':('); //}; var ifHappy = function () { changingToHappy = true; setTimeout(function () { if (changingToHappy) { $("#face").text(':)'); } }, 500); }; var ifNotHappy = function () { changingToHappy = false; setTimeout(function () { if (!changingToHappy) { $("#face").text(':('); } }, 500); }; $("#textBox").keypress( function (event) { if (event.which == 49) { ifHappy(); $("#flickerFace").text(':)'); } if (event.which == 50) { ifNotHappy(); $("#flickerFace").text(':('); } } ); 

如果您在小提琴中快速按1,2,1,2等等，脸部将保持不闪烁一会儿，然后超时将赶上并且它将开始改变状态。

这个小提琴http://jsfiddle.net/9w70wxgz/4/模拟了这个问题。

澄清一下，如果没有试图在一段时间内改变其状态，我只希望改变面部。

Answer 1

你正在寻找的是一个debounced函数，这是一个代码的例子（你几乎在那里）：

 //storage for timer var notHappyTimer; var ifNotHappy = function () { changingToHappy = false; //removes timer if event fires in less than 500ms clearTimeout(notHappyTimer); //resets it to attempt again in 500ms notHappyTimer = setTimeout(function () { if (!changingToHappy) { $("#face").text(':('); } }, 500); }; 

如您所见，您只需将超时分配给一个变量，该变量每次触发该函数时都会自行清除，然后再次启动计时器。 这可确保仅在500ms内未触发该函数时才会发生文本更改。