如何仅在调整大小操作完成后执行操作？

等待“resize”事件的“End”以实现最佳操作执行

在事件驱动编程中，处理大小是很常见的使用“resize”事件进行更改，通常分配给窗口或其他可调整大小的元素。但是，当发生调整大小操作时，在此过程中会多次触发“resize”事件，从而导致事件处理程序的冗余执行。

捕获“resize”事件的“End”

为了解决这个问题并仅在调整大小结束时执行操作，我们可以采用一种涉及使用的技术'setTimeout()' 和 'clearTimeout()'。

解决方案：

创建一个函数 'resizedw()'，它将作为您的事件处理程序调整大小操作。

function resizedw() {
  // Your action to be performed when resizing finishes
}

声明一个变量“doit”，并将其初始化为 '无效的'。该变量将保存 'setTimeout()' 返回的超时 ID。

var doit = null;

将事件侦听器附加到 'window' 对象的 'onresize' 事件。

window.onresize = function() {

使用“clearTimeout()”取消与“doit”关联的任何待处理超时请求变量。

  clearTimeout(doit);

将 'setTimeout()' 的结果分配给 'doit' 变量。这将安排在延迟 100 毫秒后执行 'resizedw()'。

  doit = setTimeout(resizedw, 100);
};

当调整大小操作结束时，将调用 'onresize' 事件处理程序，而不会立即触发 'resizedw()' 。在指定的延迟（100 毫秒）后，'resizedw()' 将执行，标志着调整大小过程完成。

示例代码：

以下代码演示此方法的实现：

function resizedw() {
  // Your action to be performed when resizing finishes
  console.log('Resizing finished!');
}

var doit = null;
window.onresize = function() {
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

此解决方案通过防止调整大小过程中执行的相关操作。相反，仅在调整大小操作完全结束后才会触发该操作。

以上是如何仅在调整大小操作完成后执行操作？的详细内容。更多信息请关注PHP中文网其他相关文章！