Question

我有一个输入和一个按钮。当我从输入模糊并且输入已更改时，应调用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>

Answer 1

Underscore让您满意：http://underscorejs.org/#throttle

throttle将阻止您的函数在a中被调用两次指定的时间长度。
once会阻止您的函数被调用两次。

Answer 2

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

首先，触发“更改”事件，设置called = true，然后执行console.log("called");并再次设置called=false。
然后，“{click”事件被触发，但是called == false，因此它设置called = true;，然后执行console.log("called");并再次设置called=false。

Answer 3

这是一个将完成这项工作的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);
    }
}

Answer 4

添加超时，类似这样的

function schedludePrice() {

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

}

这样，如果函数在模糊和点击事件的短时间内被调用两次，价格函数只会被调用一次。

Answer 5

最简单的处理方式可能是在调用Price时存储日期时间并使用它来检查它是否最近被调用过。

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

refDate = new Date();

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

调用相同函数的两个dom事件应该只在同一时间发生一次调用该函数

5 个答案: