7

我有一个输入和一个按钮。当我从输入中模糊并且输入发生变化时，应该调用 price() 函数。此外，当我单击按钮时，应该调用 price() 函数。

问题是当用户修改输入值并点击按钮时，price() 函数被调用了两次。我不希望这种情况发生。

我尝试了老式的方法，在输入时将变量“inPriceFunction”设置为true，并在输入前检查它是否未设置。这不起作用，因为两个事件（模糊和单击）是在完全相同的时间执行的，if 和变量集没有时间发生。

我怎样才能避免这种情况？

我试过的：

<div>
    <input type=text onchange="price();" />
</div>
<button onclick="price();" />test</button>
<script>
called = 0;
function price() {
    if(called == true){
        return;
    } else {
        called = true;
    }
    console.log("called");
    called=false;
}
</script>
4

5 回答 5

3

下划线有你覆盖：http ://underscorejs.org/#throttle

  • throttle将防止您的函数在指定的时间内被调用两次。
  • once将阻止您的函数被调用两次。
于 2013-05-17T14:20:33.760 回答
1

这是一个可以完成这项工作的jsfiddle。当然，您不应该使用全局变量：

http://jsfiddle.net/SZe26/

var clicktimer = null;

function clickfunc() {
    var BLOCK_TIME = 500;
    function handleclick() {
        console.log("Pressed!");
    }

    if (clicktimer) {
        console.log("Skipping handling of click!");
    } else {
        handleclick();
        clicktimer = setTimeout(function() {
            clicktimer = null;
        }, BLOCK_TIME);
    }
}
于 2013-05-17T14:13:53.113 回答
1

单击和更改事件不会同时发生。它们一个接一个地发生。

  • 首先，触发“change”事件，设置called = true，然后执行console.log("called");并called=false再次设置。
  • 然后，“click”事件被触发，但是called == false，所以它设置called = true;然后执行console.log("called");并called=false再次设置。
于 2013-05-17T13:37:53.057 回答
0

添加超时，像这样

function schedludePrice() {

   if(myTimeOut){
      clearTimeout(myTimeOut);
   }
   myTimeOut = setTimeout('price()', 10);

}

这样，如果您的 blur 和 click 事件在短时间内调用了该函数两次，那么 Price 函数将仅被调用一次。

于 2013-05-17T13:02:25.810 回答
0

处理这个问题的最简单的方法可能是在调用 Price 时存储一个日期时间，并使用它来检查它是否最近被调用过。

if (refDate > new Date(10000 + (new Date())) { // 1  second delay?
    return;
}

refDate = new Date();

不过，对 Date 的两次调用可能会返回完全相同的日期（因此不需要进行日期操作）。

于 2013-05-17T13:02:40.300 回答