主页 / 问题 / 549185
Accepted
user193361
Asked:2020-07-27 23:39:53 +0800 CST2020-07-27 23:39:53 +0800 CST

形状变化延迟

  • 772

有两个输入字段，一个是用户输入数据，另一个是根据用户输入的内容而变化。如何设置 1 秒的延迟，之后第二个输入将开始改变？

javascript

3 个回答

  1. 我知道需要这样的东西。

    有一个用于此的去抖功能，可以在 Underscore/Lodash 库中找到。它将在最后一次调用后仅一秒钟执行。

    var $first = document.getElementById( 'first' );
var $second = document.getElementById( 'second' );

var debouncedFunction = _.debounce( function() {
  $second
    .placeholder = $first.value;
}, 1000 );

$first.addEventListener( 'input', debouncedFunction );
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>


<label>Первое поле
  <input id='first' />
</label>

<br />

<label>Второе поле
  <input id='second' placeholder='' />
</label>

    • 2
  2. Best Answer

    ~function () {
  var t;

  $('#text-src').on('input', function(){
    clearTimeout(t);

    t = setTimeout(function(input) {
      $('#text-dest').val($(input).val());
    }, 1000, this);	
  })
}();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="text-src" type="text">
&gt;&gt;&gt;
<input id="text-dest" type="text">

    • 2

  3. 让我们这样尝试：

    $('#enter-text').on('change', function(){
	var our_text = $(this).val();
	setTimeout (function() {
		$('#text').val(our_text)
	}, 1000);	
})
    * {
	box-sizing: border-box;
}

.wrapper {
	margin: 30px auto;
	text-align: center;
}
input {
	border: 2px solid #747474;
	padding: 15px 30px;
	outline: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
	<input id='enter-text' type="text" />
	<p>You entered:</p>
	<input id="text">	
</div>

    • 1

相关问题