input change 延时 防抖

原作者: 零零博客
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.清除旧的定时器，然后设置新的定时器。这样在一定时间内，回调函数不会重复执行，只会执行一次。