满足条件时如何立即显示警报？答案

【问题标题】：How to display an alert immediately when a condition is met?满足条件时如何立即显示警报？
【发布时间】：2019-07-26 11:01:20
【问题描述】：

我正在尝试在购物车中的总价格超过 100 美元时发出警报。

我使用了一个简单的 if 语句，当满足条件时，显示警报。下面是我在 HTML 中的代码（我正在修改 Shopify 的主题）。

<script>
  function showAlert() { alert('You triggered an alert!'); }
</script>
{% if cart.total_price > 100 %}
  <script>showAlert();</script>
{% endif%}

这很接近，但不是我想要的。它仅在我刷新页面后显示警报。我希望在购物车达到 100 美元时立即显示警报。所以，当我添加一个产品并且总价值超过 100 美元时，我希望立即显示警报。我该怎么做？

【问题讨论】：

商品是如何添加到您的购物车中的？根据您的问题，听起来像是在没有刷新整个页面的情况下添加了项目；如果是这种情况，您需要添加一些 AJAX 调用以在添加每个项目时更新您的总数，然后在每次添加后调用您的检查。如果您可以发布更多说明如何添加项目的代码，它将帮助我们为您提供更可靠的答案。祝你好运！
请拿起tour（你会得到一个徽章！），环顾四周，仔细阅读help center，尤其是How do I ask a good question?，我还推荐Jon Skeet 的Writing the Perfect Question。您需要修改（或添加）页面上的 JavaScript。如果没有相关代码，我们将无法帮助您做到这一点（无论如何，对于 SO 的格式来说，这个问题太宽泛了）。
相关：stackoverflow.com/questions/13840429/…

标签： javascript html liquid

【解决方案1】：

浏览器以前支持的一种方法现在已弃用 Object.watch 可用于实现您的要求，但您可以使用以下多边形填充。

  if (!Object.prototype.watch) {
        Object.defineProperty(Object.prototype, "watch", {
          enumerable: false
          , configurable: true
          , writable: false
          , value: function (prop, handler) {
            var
              oldval = this[prop]
              , newval = oldval
              , getter = function () {
                return newval;
              }
              , setter = function (val) {
                oldval = newval;
                return newval = handler.call(this, prop, oldval, val);
              }
            ;

            if (delete this[prop]) { // can't watch constants
              Object.defineProperty(this, prop, {
                get: getter
                , set: setter
                , enumerable: true
                , configurable: true
              });
            }
          }
        });
      }

    var cart = {price: 40}
    cart.watch('price', (name, prev, current) => {
	if(current > 100) {
		alert(`your price is ${current} dollars which is greater than 100`);
	}
    })
    cart.price = 140

【讨论】：