JS延时等待

cqwcns 发表于 2019-10-8 22:53

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

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

<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 发表于 2019-10-8 23:06

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

冥道残月破 发表于 2019-10-8 23:50

简单点lodash库 debounce函数

15774211127 发表于 2019-10-9 00:17

qq18350 发表于 2019-10-9 10:53

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

cqwcns 发表于 2019-10-9 12:58

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

var autosearch = new AutoSearch();

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

cqwcns 发表于 2019-10-9 12:59

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

感谢，对路，正在了解。

cqwcns 发表于 2019-10-9 13:14

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

我的代码：
<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>

函数防抖：
/**
* @desc 函数防抖
* @Param 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 发表于 2019-10-9 14:19

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);

   }

});

页: [1]

吾爱破解 - 52pojie.cn's Archiver

JS延时等待