Question

我试图在IE Mobile 6上的表格输入中去掉击键（从我收集的内容，在支持方面与IE 3-4相当）。

由于缺乏支持，我无法在声明后添加事件监听器（即document.getElementById('elementId').addEventListener(...)不起作用），我只能内联，如onkeydown="doSomething()"

Here是一个jsBin。

因此，使用此去抖功能（取自David Walsh）：

function debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

设置事件功能的推荐方法如下：

var doSomething = debounce(function() { ... }, 250);

但是，我无法在IE Mobile 6上的内联事件侦听器中使用此doSomething样式函数。

所以，在标记中，我试过了：

<input type="text" onkeydown="doSomething()" />

和

<input type="text" onkeydown="doSomething()()" />

在javascript中：

// return the result of debounce()
function doSomething() {
    return debounce(function() { ... }, 250);
}

// just debounce()
function doSomething() {
    debounce(function() { ... }, 250);
}

// return the result of the returned function of debounce, aka debounce()()
function doSomething() {
    return debounce(function() { ... }, 250)();
}

我还尝试将debounce功能的全部内容放在此函数中，例如：

function doSomething() {
    var timeout, func, wait, immediate;

    func = function() {
        console.log('test');
    };

    wait = 250;

    return function () {
        var context = this, args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

所以，长问题简短：

我怎样才能写出这个确切的陈述：

var doSomething = debounce(...);

像这样：

function doSomething() {

}

Answer 1

你似乎有一个非常独特的情况。鉴于您的目标浏览器（IE Mobile 6）实现了相当古老的技术（ECMAScript 3和IE 8中的元素），您将无法使用标准addEventListener方法。部分问题可能是由于使用内联javascript的上下文限制以及您针对旧的旧版（1999）JS进行编程这一事实的混合。让我们看看它是如何工作的。

修改还要确保将代码包装在某种文档中。我将使用jQuery来做到这一点。这可能就是你的JS没有执行的原因。

HTML

<input type='text' id='theInput' /> <script src='yourDebounceScript.js'></script>

JS

// by the time this is executed, // DOM elements above this script will be ready (function() { function debounce(func, wait, immediate) { var timeout; return function () { var context = this, args = arguments; var later = function () { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; } var input = document.getElementById('theInput'); input.attachEvent('keydown' function() { // wrap your debounce function in an anonymous function // so that you can pass arguments to the debounce as needed debounce(function() { /* ... */ }, 250, true); }); })();

如果你可以使用jQuery：

// make sure the document is ready before trying to access the DOM $(function() { // your debounce function here... // jQuery will handle the version compatibility for you $('#theInput').keydown(debounce); });

使用具有分析时函数声明语法的去抖函数

1 个答案: