JS延时等待

cqwcns

以下是一个搜索框的代码，功能已经实现，就是当文本变动时，它会马上GET关键字到PHP，PHP根据关键字返回JSON数据。
还有个小问题，我的问题时不想文本变动马上GET，因为当用户在输入关键字时它不停GET，很耗资源。


希望实现有输入后延时2秒，如果没有新的输入再GET，如果有新的输入，则取消原来的计划，按新的输入GET。
即每次GET的前提是2秒内无新的输入。
请会的大哥帮忙改一下，谢谢。

[HTML] 纯文本查看 复制代码

 <input type="text"  class="autosearch2">

<script>
var input = $('.autosearch2');
var autosearch = new AutoSearch();
autosearch.init({input:input ,autoShow:false,data:function(callback){
$.get('/php/huodeziduanPost.php',{vBiao:"dizhi",vZiDuan:"DiZhiQuanCheng",vDISTINCT:"DISTINCT",key:input.val()},function(result){
callback(result);
},'json');
}
});
</script>

991375252

节流防抖了解一下 这是关键字 百度搜吧

冥道残月破

简单点  lodash库 debounce函数

15774211127

var input = $('.autosearch2');

var autosearch = new AutoSearch();
var interval = null;

autosearch.init({
        input: input,
        autoShow: false,
        data: function(callback) {
                if (interval) {
                        clearInterval(interval);
                }
                interval = setInterval(function() {
                        $.get('/php/huodeziduanPost.php', {
                                vBiao: "dizhi",
                                vZiDuan: "DiZhiQuanCheng",
                                vDISTINCT: "DISTINCT",
                                key: input.val()
                        },
                        function(result) {

                                callback(result);

                        },
                        'json');

                },
                2000);

        }

});

qq18350

这个简单，设置定时器俩秒，两秒内有新输入就清空定时器，再重新设置定时器，俩秒内没有新输入就执行定时器内的内容，就是请求，这很简单把

cqwcns

15774211127 发表于 2019-10-9 00:17
var input = $('.autosearch2');

var autosearch = new AutoSearch();

你好，感谢，有个问题，就是执行后它不会停止，会不断每2秒执行一次。

cqwcns

991375252 发表于 2019-10-8 23:06
节流防抖了解一下 这是关键字 百度搜吧

感谢，对路，正在了解。

cqwcns

我看了一下资料，觉得防抖比较适合我的需求，但尝试了一下，不知道我的代码怎么结合防抖函数使用，麻烦大哥指导一下，感谢。
白菜一枚，自学自完，请各位指教，谢谢。


我的代码：

[JavaScript] 纯文本查看 复制代码

<script>
var input = $('.autosearch2');
var autosearch = new AutoSearch();
autosearch.init({input:input ,autoShow:false,data:function(callback){
$.get('/php/huodeziduanPost.php',{vBiao:"dizhi",vZiDuan:"DiZhiQuanCheng",vDISTINCT:"DISTINCT",key:input.val()},function(result){
callback(result);
},'json');
}
});
</script>

函数防抖：

[Asm] 纯文本查看 复制代码

/**
 * @desc 函数防抖
 * [url=home.php?mod=space&uid=952169]@Param[/url] func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func,wait,immediate) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

15774211127

cqwcns 发表于 2019-10-9 12:58
你好，感谢，有个问题，就是执行后它不会停止，会不断每2秒执行一次。

setinterval 改成 setTimeout

var input = $('.autosearch2');

var autosearch = new AutoSearch();
var interval = null;

autosearch.init({
        input: input,
        autoShow: false,
        data: function(callback) {
                if (interval) {
                        clearInterval(interval);
                }
                interval = setTimeout(function() {
                        $.get('/php/huodeziduanPost.php', {
                                vBiao: "dizhi",
                                vZiDuan: "DiZhiQuanCheng",
                                vDISTINCT: "DISTINCT",
                                key: input.val()
                        },
                        function(result) {

                                callback(result);

                        },
                        'json');

                },
                2000);

        }

});