原作者: 零零博客 https://blog.ll00.cn/index.php/archives/62/
让input propertychange事件时间延时执行
在使用input propertychange事件时,遇到一个问题。我输入一个字时,会重复执行五六次事件,事件里又包含了网络请求,体验非常差。经过搜索,找到了解决办法,详情如下。
代码
// 监听textarea的输入 $(document).on('input propertychange', 'textarea', function () { var detailsElement = $(this), details = $(this).val(); // 确保是propertychange事件,并且是改变了内容 if (window.event && event.type == 'propertychange' && event.propertyName != 'value') return; // 清除旧的定时器 window.clearTimeout($(this).data('timeout')); // 设置新的定时器 $(this).data('timeout', setTimeout(function () { // 这里放置要执行的代码 console.log('值改变了~输入值:' + details); }, 5000)); // 延时值:5000 = 5秒 });原理
1.监听textarea多行文本输入框的input和propertychange事件 2.事件触发后,判断是否是propertychange事件,并且是改变内容的propertychange事件 3.清除旧的定时器,然后设置新的定时器。这样在一定时间内,回调函数不会重复执行,只会执行一次。