前端自动化问题小问，关于定时器以及触发器事件

Question

在百度首页控制台中执行以下代码

var i = 0;
        setInterval(function () {
            $("#kw").val(`${i}`);
            $("#su").trigger("click");
            i++;
        }, 2000); 

为什么除了第一次能够在搜索框输入i并且点击搜索按钮打开搜素0的页面，之后只会在搜索框输入i但是并没有点击搜索按钮的事件发生

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

---

这是因为setInterval函数会按照设定的时间间隔重复执行给定的函数，但是执行函数的时间需要考虑到代码的执行时间。在你的代码中，在每次执行函数时，首先设置了$("#kw").val(${i});，然后触发了$("#su").trigger("click");。

第一次执行时，$("#kw").val(${i});将搜索框中的值设置为0，然后$("#su").trigger("click");模拟点击了搜索按钮，打开了搜索0的页面。

但是在接下来的执行过程中，由于每个函数的执行时间并不是精确的2000ms，而是大于2000ms的时间（因为执行过程中涉及到DOM操作，需要一些时间），所以当下一次函数执行时，搜索框中的值已经改变为了1，然后又触发了点击事件，但是此时搜索按钮已经被点击过一次了，再次触发点击事件只会导致重复的点击操作，而不会打开搜索1的页面。

如果想要在每次函数执行时都触发点击事件，可以考虑使用setTimeout函数，这样每个函数执行完毕后等待指定时间再执行下一个函数。例如：

var i = 0;
function myFunction() {
  $("#kw").val(`${i}`);
  $("#su").trigger("click");
  i++;
}
setTimeout(function() {
  myFunction();
  setTimeout(arguments.callee, 2000);
}, 2000);

这样就能够在每次执行函数时，都触发搜索按钮的点击事件。