SetTimeout和ScrollTop的奇怪行为
[英]Strange behavior with SetTimeout and ScrollTop
问题描述
我不明白为什么我必须将scrollTop函数包装在setTimeout 。 我知道在后台使用setTimeout会发生什么：将函数放在Callback队列中（从Web API提供），并在调用堆栈中的所有代码完成后执行。 但是，为什么在这种情况下，我没有setTimeout就具有这种行为？
例如，选择spain和luxembourg （Ctrl +单击），请停留在select器的底部。 使用两个按钮进行测试。 发生两种不同的行为。
编辑1：编辑：删除所有console.log ，如果没有setTimeout仍然无法正常工作
编辑2：在第一个答案之后，我尝试了@Murali Nepalli的代码，但仍然无法正常工作。 您可以确切地看到发生了什么（我在Google Chrome上）
编辑3：仅出现在Chrome浏览器上，我的版本： 75.0.3770.142 (Build officiel) (64 bits) (cohort: Stable)
$(function() { $('form').on('resetwithtimeout', function(e) { var $select = $(e.currentTarget).find('select'); $select.find('option') .filter(':selected').prop("selected", false).end() .filter(':first').prop("selected", true); setTimeout(function() { $select.scrollTop(0); }, 0); }); $('form').on('resetwithouttimeout', function(e) { var $select = $(e.currentTarget).find('select'); $select.find('option') .filter(':selected').prop("selected", false).end() .filter(':first').prop("selected", true); $select.scrollTop(0); }); $('#button1').on('click', function(e) { $('form').trigger('resetwithtimeout'); }) $('#button2').on('click', function(e) { $('form').trigger('resetwithouttimeout'); }) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <form> <select name="country" id="country-select" multiple size="5"> <option selected value="austria">Austria</option> <option value="belgium">Belgium</option> <option value="bulgaria">Bulgaria</option> <option value="croatia">Croatia</option> <option value="republic">Republic of Cyprus</option> <option value="czech">Czech Republic</option> <option value="denmark">Denmark</option> <option value="estonia">Estonia</option> <option value="finland">Finland</option> <option value="france">France</option> <option value="germany">Germany</option> <option value="greece">Greece</option> <option value="hungary">Hungary</option> <option value="ireland">Ireland</option> <option value="italy">Italy</option> <option value="latvia">Latvia</option> <option value="lithuania">Lithuania</option> <option value="luxembourg">Luxembourg</option> <option value="malta">Malta</option> <option value="netherlands">Netherlands</option> <option value="poland">Poland</option> <option value="portugal">Portugal</option> <option value="romania">Romania</option> <option value="slovakia">Slovakia</option> <option value="slovenia">Slovenia</option> <option value="spain">Spain</option> <option value="sweden">Sweden and the UK</option> </select> <button id="button1" type="button">Reset form with scroll inside setTimeout</button> <button id="button2" type="button">Reset form with scroll not inside a setTimeout</button> </form> </body>
谢谢 ！
2 个解决方案
解决方案1
1 2019-07-23 00:05:01
您可以只更改“选择”元素的选择索引。 这会将滚动位置重置为顶部。 https://jsfiddle.net/hbL8tzma/
$('form').on('resetwithouttimeout', function(e) {
var $select = $(e.currentTarget).find('select');
$select[0].selectedIndex = 0;
});
解决方案2
1 已采纳 2019-07-23 02:39:46
那是Chrome的错误。
无论出于何种原因，每次我们以编程方式更改<option>之一的选定属性时，他们都尝试在最后一个用户选择的<option>上调用scrollIntoView ，如以下代码片段所示：
var $select = $('select') .on('input', function() { console.log('try to scroll inside the select'); current = 0; this.scrollTop = 0; // move to top startSelect(); $select .find('.user-selected').removeClass('user-selected') .end().find(':selected').addClass('user-selected'); }) var $options = $select.find('option'); var current = 0; console.log('select any option'); // selects all the <option>s one by one function startSelect() { setTimeout(function() { $options.prop("selected", false) .get(current).selected = true; // call recursively if ((++current) < 26) startSelect(); }, 1000); }
.user-selected { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <select name="country" id="country-select" multiple size="5"> <option value="austria">Austria</option> <option value="belgium">Belgium</option> <option value="bulgaria">Bulgaria</option> <option value="croatia">Croatia</option> <option value="republic">Republic of Cyprus</option> <option value="czech">Czech Republic</option> <option value="denmark">Denmark</option> <option value="estonia">Estonia</option> <option value="finland">Finland</option> <option value="france">France</option> <option value="germany">Germany</option> <option value="greece">Greece</option> <option value="hungary">Hungary</option> <option value="ireland">Ireland</option> <option value="italy">Italy</option> <option value="latvia">Latvia</option> <option value="lithuania">Lithuania</option> <option value="luxembourg">Luxembourg</option> <option value="malta">Malta</option> <option value="netherlands">Netherlands</option> <option value="poland">Poland</option> <option value="portugal">Portugal</option> <option value="romania">Romania</option> <option value="slovakia">Slovakia</option> <option value="slovenia">Slovenia</option> <option value="spain">Spain</option> <option value="sweden">Sweden and the UK</option> </select> </form>
而且由于他们显然使用{ behavior: "auto" }选项来调用它，因此您甚至无法确定setTimeout(fn, 0)足以抵消它。
但是对于您想做的事情，也许<form>元素的reset()方法可能适合，甚至只是<button type="reset"> 。 这些不受此怪异行为的影响：
var $form = $('form'); var $select = $form.find('select'); $form.on('reset', function() { $select.scrollTop(0); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <select name="country" id="country-select" multiple size="5"> <option selected value="austria">Austria</option> <option value="belgium">Belgium</option> <option value="bulgaria">Bulgaria</option> <option value="croatia">Croatia</option> <option value="republic">Republic of Cyprus</option> <option value="czech">Czech Republic</option> <option value="denmark">Denmark</option> <option value="estonia">Estonia</option> <option value="finland">Finland</option> <option value="france">France</option> <option value="germany">Germany</option> <option value="greece">Greece</option> <option value="hungary">Hungary</option> <option value="ireland">Ireland</option> <option value="italy">Italy</option> <option value="latvia">Latvia</option> <option value="lithuania">Lithuania</option> <option value="luxembourg">Luxembourg</option> <option value="malta">Malta</option> <option value="netherlands">Netherlands</option> <option value="poland">Poland</option> <option value="portugal">Portugal</option> <option value="romania">Romania</option> <option value="slovakia">Slovakia</option> <option value="slovenia">Slovenia</option> <option value="spain">Spain</option> <option value="sweden">Sweden and the UK</option> </select> <button type="reset">Reset form</button> </form>
用setTimeout在Node.js中同步循环-奇怪的，显然是故意的行为
[英]Synchronizing loop in Node.js with setTimeout - strange, apparently intentional behavior
如果您使用setTimeout，AngularJS奇怪的数据绑定行为
[英]angularjs strange data bindings behavior if you use setTimeout
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.